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
180
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
34
10k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
2.3k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.5k
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.3k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
1.1k
Other Decks in Programming
See All in Programming
型安全なDrag and Dropの設計を考える
yudppp
5
660
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
670
Reactive Thinking with Signals, Resource API, and httpResource @Devm.io Angular 20 Launch Party
manfredsteyer
PRO
0
130
TSConfig Solution Style & subpath imports to switch types on a per-file basis
maminami373
1
180
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.6k
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
1.6k
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
140
バリデーションライブラリ徹底比較
nayuta999999
1
450
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
110
DevTalks 25 - Create your own AI-infused Java apps with ease
kdubois
2
120
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Music & Morning Musume
bryan
47
6.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Applications with DynamoDB
mza
95
6.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
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での クロック制御の プラクティス教えて!
ありがとうございました