WebAudio で ScriptProcessorNode とかを使ってちょっと変なことしようと思うと、波形が実際どうなっているのか見たくなったりするわけですが、うまいこと取得できなくてイライラするわけです。なのでトリガをかけて一定期間の波形を表示するのを作りました。

デバッグ用なので、UI 上には殆ど機能はなく、以下のようにコード上で設定を引数で渡す感じです。トリガはSimple, RaisingEdge, FallingEdge, DualEdge だけとりあえず実装してあります。実装すればチャンネル間の and トリガとかもできる感じの設計です。

WebAudioDebug.prove(context, merger, {
    bufferSize : 64e3,
    windowTime : 100e-3,
    highResolution : false,
    trigger : WebAudioDebug.OscilloscopeNode.Trigger.RaisingEdge({ triggerChannel: 0, width : 10, threshold : 0.5 }),
    continuous : false
});

作ってる途中でやる気が失せたので、特に highResolution: true (Retina 対応) にしたときパフォーマンスがめっちゃ劣化するけどそのままです。あと、繋げる段数が違ったノードを merge して渡すとズレたりするので、ちょっとめんどうくさい感じです。なんとかしたいけど、その前にやる気がなくなったのでそのうちやる気がでたらやるかもしれないです。

  1. トップ
  2. tech
  3. WebAudio のデバッグ用のオシロスコープ