Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザでステップシーケンサ 〜 クロックつらくない?
Search
OKUNOKENTARO
September 06, 2016
Programming
2
500
ブラウザでステップシーケンサ 〜 クロックつらくない?
2016/9/6に、WebAudio.tokyoで発表した資料です。
OKUNOKENTARO
September 06, 2016
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
トレタO/X アーキテクチャ移行記 Next.js App Router化への道のり / TORETA TECH UPDATE 1
okunokentaro
5
11k
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
190
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.4k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.6k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.7k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
670
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
14
6.4k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Programming
See All in Programming
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
890
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
220
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
技術同人誌をMCP Serverにしてみた
74th
1
650
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
We Have a Design System, Now What?
morganepeng
53
7.7k
Done Done
chrislema
184
16k
How STYLIGHT went responsive
nonsquared
100
5.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
GitHub's CSS Performance
jonrohan
1031
460k
KATA
mclloyd
30
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Rails Girls Zürich Keynote
gr2m
95
14k
Unsuck your backbone
ammeep
671
58k
Transcript
ブラウザでステップシーケンサ クロックつらくない? Sep 6, 2016 / WebAudio.tokyo @armorik83
はちさん @armorik83 フロントエンド・エンジニア 元・音楽専門学校DTM科講師 MIDI検定1級所持
ステップシーケンサを 作った話
Demo
Web Music Hackathon #4 ドット絵シーケンサ
Web Music Hackathon #4 • Web MIDI API • 音の出力は外部のソフトシンセに頼っていた
• 誰もが鳴らせるアプリじゃない • 反省点多数 • 詳細は https://speakerdeck.com/armorik83/dotutohui-sikensa-ji-shu-de-urabanasi
1年後
Web Music Hackathon #5 ステップシーケンサ
Web Music Hackathon #5 • 割りきった! • Web Audio APIによる発声
• Web MIDI APIは使っていない • 誰が起動しても音を鳴らせる • 詳細は https://github.com/armorik83/wmh5-team-chaco
アーキテクチャ的な話 • フレームワーク Angular 2 • ng-kyotoをよろしく • 言語 ES2015
+ Babel • TypeScriptはハッカソン向きではない
アーキテクチャ的な話 • シーケンスデータの永続化はFirebase • いつ誰が開いても同じ音符を共有 • カーソル位置に音符があれば AudioContext.createOscillatorが発声
開発体制 • 開発は二人 • Git力もJS力も問題ないのでサクサク • 現地での開発は実質4時間
開発体制 • 開発は二人 • Git力もJS力も問題ないのでサクサク • 現地での開発は実質4時間
日頃から 作っててよかった
フレーム制御 • Angular 2でゲームを制作していた • 永遠に完成しない • フレーム制御と時間軸が必要 • ゲームマスターとなるクロックジェネレータを開発
クロックジェネレータ export class FrameService { constructor() { this.startTime =
window.performance.now(); this.subject = new Subject(); } run(bpm) { let fps = 1 / (60 / bpm / 4); let loop = () => { requestAnimationFrame(loop); const lastTime = window.performance.now(); const frame = ~~((lastTime - this.startTime) / (1000.0 / fps)); this.subject.next(frame); }; loop(); } get observable() { return this.subject; } }
いや…動くけど…
rAFでのクロック制御 • 16分音符レベルで間引いたとはいえ 計算量がかなり多そう • Web Audioのクロック制御のためのAPIじゃない
つらい • テンポチェンジを実装しようとしたら
つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか
つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか • 次のイベント発火とかで
つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか • 次のイベント発火とかで • ジッター発生して超つらい
質問タイム
質問タイム こっちから
Web Audioでの クロック制御の プラクティス教えて!
ありがとうございました