web-dev-qa-db-ja.com

Web Audio API：MP3チャンクのストリームを再生する方法

そのため、Web Audio APIを使用して、Node.jsとSocket.IOを使用してブラウザーにストリーミングされたMP3ファイルチャンクをデコードして再生しようとしています。

このコンテキストでは、受信したオーディオデータチャンクごとに新しいAudioBufferSourceNodeを作成する唯一のオプションです。または、すべてのチャンクに対して単一のAudioBufferSourceNodeを作成し、新しいオーディオデータをに追加することもできます。ソースノードのbuffer属性の終わり？

現在、これは私がMP3チャンクを受信し、それらをデコードし、再生用にスケジュールする方法です。受信している各チャンクが「有効なMP3チャンク」であり、Web AudioAPIによって正常にデコードされていることをすでに確認しました。

audioContext = new AudioContext();
startTime = 0;

socket.on('chunk_received', function(chunk) {
    audioContext.decodeAudioData(toArrayBuffer(data.audio), function(buffer) {
        var source = audioContext.createBufferSource();
        source.buffer = buffer;
        source.connect(audioContext.destination);

        source.start(startTime);
        startTime += buffer.duration;
    });
});

新しいオーディオデータでWebAudioAPI再生を「更新」するための最善の方法に関するアドバイスや洞察をいただければ幸いです。

javascripthtmlaudiostreamingweb-audio-api
21
Jonathan Byrne

いいえ、AudioBufferSourceNodeを再利用することはできません。また、AudioBufferにPushすることはできません。それらの長さは不変です。

この記事（ http://www.html5rocks.com/en/tutorials/audio/scheduling/ ）には、Web AudioAPIを使用したスケジューリングに関するいくつかの優れた情報があります。しかし、あなたは正しい方向に進んでいます。

4
Kevin Ennis

現在、decodeAudioData()は完全なファイルを必要とし、不完全なファイルに対してチャンクベースのデコードを提供することはできません。 Web Audio APIの次のバージョンは、この機能を提供する必要があります： https://github.com/WebAudio/web-audio-api/issues/337

その間、新しいAPIバージョンが利用可能になるまで、オーディオをチャンクでデコードするための例を書き始めました。

https://github.com/AnthumChris/fetch-stream-audio

6
AnthumChris

少なくとも2つの可能なアプローチがあります。

  1. scriptProcessorNodeを設定します。これにより、受信およびデコードされたデータのキューがWebオーディオのリアルタイムフローに送られます。

  2. audioBufferSource.loopのプロパティを利用する-オーディオ時間に応じてaudioBufferのコンテンツを更新します。

どちらのアプローチも https://github.com/audio-lab/web-audio-stream で実装されています。これを技術的に使用して、受信したデータをWebオーディオにフィードできます。

0
dy_