Slide 1

Slide 1 text

ブラウザでステップシーケンサ
 クロックつらくない? Sep 6, 2016 / WebAudio.tokyo @armorik83

Slide 2

Slide 2 text

はちさん @armorik83 フロントエンド・エンジニア 元・音楽専門学校DTM科講師 MIDI検定1級所持

Slide 3

Slide 3 text

ステップシーケンサを 作った話

Slide 4

Slide 4 text

Demo

Slide 5

Slide 5 text

Web Music Hackathon #4 ドット絵シーケンサ

Slide 6

Slide 6 text

Web Music Hackathon #4 • Web MIDI API • 音の出力は外部のソフトシンセに頼っていた • 誰もが鳴らせるアプリじゃない • 反省点多数 • 詳細は
 https://speakerdeck.com/armorik83/dotutohui-sikensa-ji-shu-de-urabanasi

Slide 7

Slide 7 text

1年後

Slide 8

Slide 8 text

Web Music Hackathon #5 ステップシーケンサ

Slide 9

Slide 9 text

Web Music Hackathon #5 • 割りきった! • Web Audio APIによる発声 • Web MIDI APIは使っていない • 誰が起動しても音を鳴らせる • 詳細は
 https://github.com/armorik83/wmh5-team-chaco

Slide 10

Slide 10 text

アーキテクチャ的な話 • フレームワーク Angular 2 • ng-kyotoをよろしく • 言語 ES2015 + Babel • TypeScriptはハッカソン向きではない

Slide 11

Slide 11 text

アーキテクチャ的な話 • シーケンスデータの永続化はFirebase • いつ誰が開いても同じ音符を共有 • カーソル位置に音符があれば
 AudioContext.createOscillatorが発声

Slide 12

Slide 12 text

開発体制 • 開発は二人 • Git力もJS力も問題ないのでサクサク • 現地での開発は実質4時間

Slide 13

Slide 13 text

開発体制 • 開発は二人 • Git力もJS力も問題ないのでサクサク • 現地での開発は実質4時間

Slide 14

Slide 14 text

日頃から 作っててよかった

Slide 15

Slide 15 text

フレーム制御 • Angular 2でゲームを制作していた • 永遠に完成しない • フレーム制御と時間軸が必要 • ゲームマスターとなるクロックジェネレータを開発

Slide 16

Slide 16 text

クロックジェネレータ 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;
 }
 
 }

Slide 17

Slide 17 text

いや…動くけど…

Slide 18

Slide 18 text

rAFでのクロック制御 • 16分音符レベルで間引いたとはいえ
 計算量がかなり多そう • Web Audioのクロック制御のためのAPIじゃない

Slide 19

Slide 19 text

つらい • テンポチェンジを実装しようとしたら

Slide 20

Slide 20 text

つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか

Slide 21

Slide 21 text

つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか • 次のイベント発火とかで

Slide 22

Slide 22 text

つらい • テンポチェンジを実装しようとしたら • Event Listenerの解除とか • 次のイベント発火とかで • ジッター発生して超つらい

Slide 23

Slide 23 text

質問タイム

Slide 24

Slide 24 text

質問タイム こっちから

Slide 25

Slide 25 text

Web Audioでの クロック制御の プラクティス教えて!

Slide 26

Slide 26 text

ありがとうございました