web-dev-qa-db-ja.com

ライブストリーミング用のWeb Audio API？

live オーディオ（医療機器から）を3〜5秒以下のエンドツーエンド遅延でストリーミングする必要があります（200mS以下のネットワーク遅延を想定）。今日、 decoding 、 filtering （high、low）に browser plugin （NPAPI）を使用します、バンド）、およびオーディオストリームの playback （Web Sockets経由で配信）。

プラグインを置き換えたい。

さまざまな Web Audio APIデモ を見ていましたが、必要な機能（再生、ゲイン制御、フィルタリング）のほとんどは Web Audio API で利用できるようです。ただし、Web Audio APIのほとんどは短いサウンドやオーディオクリップを使用するため、ストリーミングソースにWeb Audio APIを使用できるかどうかは明確ではありません。

Web Audio APIを使用して、ライブストリーミングオーディオを再生できますか？

更新（2015年2月11日）：

もう少し調査してローカルプロトタイプを作成したところ、 Web Audio API によるライブオーディオストリーミングが可能かどうかわかりません。 Web Audio APIの decodeAudioData は、オーディオデータのランダムチャンクを処理するように実際に設計されていないため（この場合、WebSocketを介して配信されます）。正しく処理するには、「ファイル」全体が必要なようです。

Stackoverflowを参照してください：

createMediaElementSource を使用して<audio>要素をWeb Audio APIに接続することが可能になりましたが、<audio>要素が膨大な量のエンドツーエンドの遅延（15〜30秒）であり、遅延を3〜5秒未満に減らす手段はないようです。

I think唯一の解決策は、Web Aduio APIでWebRTCを使用することです。サーバー側の実装を大幅に変更する必要があるため、WebRTCを避けたいと思っていました。

更新（2015年2月12日）パートI ：

<audio>タグを完全に削除していません（プロトタイプを完成させる必要があります）。一度除外したら、ADPCMデータを（WebSocketsを介して）ブラウザに「ストリーミング」してから（JavaScriptで）変換できるため、createScriptProcessor（非推奨ですが、まだサポートされている）が環境に適していると思いますPCM。 Scottのライブラリ（以下を参照）がcreateScriptProcessorを使用するのと同様です。このメソッドでは、decodeAudioDataアプローチのように、データが適切なサイズの「チャンク」であり、重要なタイミングである必要はありません。

更新（2015年2月12日）パートII ：

さらにテストした後、<audio>からWeb Audio APIインターフェイスを削除しました。ソースの種類、圧縮、ブラウザによっては、エンドツーエンドの遅延が3〜30秒になる可能性があるためです。 createScriptProcessorメソッド（以下のScottの投稿を参照）またはWebRTCが残ります。意思決定者と話し合った後、WebRTCアプローチを採用することが決定されました。 I assume動作します。ただし、サーバー側のコードを変更する必要があります。

最初の答えをマークします。「質問」は閉じます。

聞いてくれてありがとう。必要に応じてコメントを追加してください。

javascripthtml5html5-audioaudio-streamingweb-audio-api
40
Tony

はい、Web Audio API（およびAJAXまたはWebsockets）をストリーミングに使用できます。

基本的に、nの長さのいくつかのチャンクをプルダウン（またはWebsocketの場合は送信）します。次に、それらをWeb Audio APIでデコードし、順番に再生するためにキューに入れます。

Web Audio APIには高精度のタイミングがあるため、スケジューリングを正しく行った場合、各バッファーの再生の間に「継ぎ目」は聞こえません。

7
Kevin Ennis

ストリーミングWebオーディオAPIシステムを作成し、Webワーカーを使用してすべてのWebソケット管理を行い、node.jsと通信して、ブラウザースレッドが単にオーディオをレンダリングするようにしました... Web Worker内のWebソケットのコード化されたとおりに実行するには、Lollipop以上が必要です...私はここに 完全なソースコードを投稿しました

4
Scott Stensland

配列に格納されている一連の個別のバッファを、毎回最新のバッファをシフトアウトして再生する方法についてのコメントを詳しく説明するには、次のようにします。

createBufferSource()を介してバッファを作成する場合、onendedイベントがあり、コールバックをアタッチできます。このイベントは、バッファが終了したときに起動します。次のようにして、配列内のさまざまなチャンクを次々に再生できます。

function play() {
  //end of stream has been reached
  if (audiobuffer.length === 0) { return; }
  let source = context.createBufferSource();

  //get the latest buffer that should play next
  source.buffer = audiobuffer.shift();
  source.connect(context.destination);

  //add this function as a callback to play next buffer
  //when current buffer has reached its end 
  source.onended = play;
  source.start();
}

お役に立てば幸いです。私はまだこれをすべてスムーズに解決する方法を試していますが、これは良いスタートであり、多くのオンライン投稿で欠落しています。

0
worker11811