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
460
ブラウザでステップシーケンサ 〜 クロックつらくない?
2016/9/6に、WebAudio.tokyoで発表した資料です。
OKUNOKENTARO
September 06, 2016
Tweet
Share
More Decks by OKUNOKENTARO
See All by OKUNOKENTARO
Podcastを継続する技術 / refactoradio-240119
okunokentaro
1
99
Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1
okunokentaro
30
9.5k
JSONとJSON Schemaを改めて理解する / tokyo_study
okunokentaro
9
1.9k
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
okunokentaro
19
5.2k
TypeScriptは10年でこんなに進化しました / TechFeed Experts Night 11
okunokentaro
6
1.5k
Hasura.io RDBをサクサク作る方法はARやO/RMだけじゃなくなりました/hasura-io
okunokentaro
5
580
コードには型アノテーションよりも要件アノテーションを増やせ!/harajukuts2
okunokentaro
13
5.9k
10年と3ヶ月でWebサービスを作った話 / Piyogrammer Conference 2021
okunokentaro
2
920
any禁止 絶対に型付けを諦めないための便利なユーティリティ関数 / techstand6
okunokentaro
21
6.2k
Other Decks in Programming
See All in Programming
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
9
5.6k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
3
590
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
8
2.1k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
110
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
7
4.1k
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
元気予報
suu_mire0726
0
850
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
870
Featured
See All Featured
A Philosophy of Restraint
colly
195
16k
Embracing the Ebb and Flow
colly
78
4.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
Typedesign – Prime Four
hannesfritz
36
2k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Bash Introduction
62gerente
604
210k
The Mythical Team-Month
searls
214
42k
Fireside Chat
paigeccino
19
2.6k
The Invisible Customer
myddelton
114
12k
Code Reviewing Like a Champion
maltzj
513
39k
The Pragmatic Product Professional
lauravandoore
24
5.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
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での クロック制御の プラクティス教えて!
ありがとうございました