ブラウザでステップシーケンサ 〜 クロックつらくない？

2016/9/6に、WebAudio.tokyoで発表した資料です。

Transcript

1. ブラウザでステップシーケンサ
 クロックつらくない？ Sep 6, 2016 / WebAudio.tokyo @armorik83
2. はちさん @armorik83 フロントエンド・エンジニア 元・音楽専門学校DTM科講師 MIDI検定1級所持
3. ステップシーケンサを 作った話
4. Demo
5. Web Music Hackathon #4 ドット絵シーケンサ
6. Web Music Hackathon #4 • Web MIDI API • 音の出力は外部のソフトシンセに頼っていた • 誰もが鳴らせるアプリじゃない • 反省点多数 • 詳細は
 https://speakerdeck.com/armorik83/dotutohui-sikensa-ji-shu-de-urabanasi
7. 1年後
8. Web Music Hackathon #5 ステップシーケンサ
9. Web Music Hackathon #5 • 割りきった！ • Web Audio APIによる発声 • Web MIDI APIは使っていない • 誰が起動しても音を鳴らせる • 詳細は
 https://github.com/armorik83/wmh5-team-chaco
10. アーキテクチャ的な話 • フレームワーク Angular 2 • ng-kyotoをよろしく • 言語 ES2015 + Babel • TypeScriptはハッカソン向きではない
11. アーキテクチャ的な話 • シーケンスデータの永続化はFirebase • いつ誰が開いても同じ音符を共有 • カーソル位置に音符があれば
 AudioContext.createOscillatorが発声
12. 開発体制 • 開発は二人 • Git力もJS力も問題ないのでサクサク • 現地での開発は実質4時間
13. 開発体制 • 開発は二人 • Git力もJS力も問題ないのでサクサク • 現地での開発は実質4時間
14. 日頃から 作っててよかった
15. フレーム制御 • Angular 2でゲームを制作していた • 永遠に完成しない • フレーム制御と時間軸が必要 • ゲームマスターとなるクロックジェネレータを開発
16. クロックジェネレータ 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;
 }
 
 }
17. いや…動くけど…
18. rAFでのクロック制御 • 16分音符レベルで間引いたとはいえ
 計算量がかなり多そう • Web Audioのクロック制御のためのAPIじゃない
19. つらい • テンポチェンジを実装しようとしたら
20. つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか
21. つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか • 次のイベント発火とかで
22. つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか • 次のイベント発火とかで • ジッター発生して超つらい
23. 質問タイム
24. 質問タイム こっちから
25. Web Audioでの クロック制御の プラクティス教えて！
26. ありがとうございました