ブラウザに音声処理をさせるためにやってる色々なこと

ブラウザに音声処理をさせるためにやってる色々なこと @boke0_jp

自己紹介 Web アプリケーションエンジニア boke0 / 木瓜丸ボケまる @boke0_jp @boke0 @boke0_jp

こんなものを作ってますブラウザで音を作って遊べるアプリアプリ内のシンセで自分好みの音を作れる作った音をMIDI的なもので鳴らせる

音声処理むずかしいサンプリングレート44100Hz 音によってはO(7n)の処理が走るさらにその音で5和音とか鳴らすことも考えられる 44100 * 7 * 5 =
1543500回の計算これをブラウザで、リアルタイムにやる

実験経験した中で一番重い音を、 128フレームずつ、10回生成し、 console.timeで計測してみる環境 Arch Linux Node.js v20.10.0

結果ウォームアップまでは1ms以上かかるサンプリングレートが44100Hzの場合、 128フレームあたり2.9ms 他の処理やクライアントのスペック次第では、2.9msを上回り、ラグることも ~128 ~256 ~384 ~512
~640 ~768 ~894 ~1024 ~1152 ~1280 0.000 0.200 0.400 0.600 0.800 1.000 1.200 1.400

ラグるとこうなります

ラグとの戦い方とりあえずWASMを使って、処理速度を上げるインタラクティブに音を鳴らす必要が無い場合は、WebWorkerで事前にレンダリングしてしまう。ボタンを押したら音が鳴る機能 →リアルタイムに処理 MIDIみたいなやつに基いて音が鳴る機能 →リアルタイム必須じゃないので、事前レンダリング

設計メインスレッド WebWorkerのスレッド AudioWorkletのスレッド(リアルタイムに音声処理してるところ) AudioWorklet WebWorker 音声の生成を命令生成した音声を返却ユーザーの入力を伝達

WASM⇔JSで可変長データ(数字や配列)を無理矢理やり取りするための基盤を自作している。(大変) wasm_bindgenのようなツールにより楽をすることが多いが、 AudioWorkletの仕様上使いにくい AudioWorkletとかWebWorkerとかを使う機会はなかなかない音を鳴らしたいという情熱だけで大変なことをしている僕と一緒に情熱だけで大変なことをしよう個人開発だからできる？

ご清聴ありがとうございました

ブラウザに音声処理をさせるためにやってる色々なこと

ブラウザに音声処理をさせるためにやってる色々なこと

木瓜丸(ぼけまる)

Featured

Transcript