AudioContext.createMediaStreamDestination()

AudioContext インターフェイスの createMediaStreamDestination() メソッドは、WebRTC (en-US) MediaStream と関連付けられた MediaStreamAudioDestinationNode (en-US) オブジェクトを生成します。この MediaStream はローカルファイルに格納されたり他のコンピュータに送信されたりする音声ストリームを表します。

MediaStream はノードが生成されたときに作成され、MediaStreamAudioDestinationNode (en-US)の stream プロパティを通じてアクセスすることができます。このストリームは navigator.getUserMedia で得られた MediaStream と同じような使い方ができます。例えば、RTCPeerConnection インターフェイスの addStream() メソッドでリモートの端末に送ることができます。

詳細は MediaStreamAudioDestinationNode (en-US) のページを参照してください。

構文

var audioCtx = new AudioContext();
var destination = audioCtx.createMediaStreamDestination();

戻り値

MediaStreamAudioDestinationNode (en-US)

例

次の簡単な例では、MediaStreamAudioDestinationNode (en-US)とOscillatorNodeとMediaRecorder (そのため現時点では、このサンプルは Firefox と Chrome でしか動作しません) を作成します。MediaRecorder は MediaStreamDestinationNode からの情報を記録するように設定されています。

ボタンをクリックするとオシレーター(振動子)が開始し、MediaRecorder も開始します。再びボタンを押して止めると、オシレーターと MediaRecorder の両方が停止します。MediaRecorder が停止すると dataavailable イベントが発火され、イベントデータが chunks配列にプッシュされます。その後、stop イベントが発火すると、新しい blob が opus タイプで作られます—そこには chunks配列のデータが書き込まれていて、その blob の URL を指す新しいウィンドウ(タブ)が開きます。

そこで opus ファイルの再生と保存ができます。

<!DOCTYPE html>
<html>
  <head>
    <title>createMediaStreamDestination() demo</title>
  </head>
  <body>
    <h1>createMediaStreamDestination() demo</h1>

    <p>Encoding a pure sine wave to an Opus file </p>
    <button>Make sine wave</button>
    <audio controls></audio>
    <script>
     var b = document.querySelector("button");
     var clicked = false;
     var chunks = [];
     var ac = new AudioContext();
     var osc = ac.createOscillator();
     var dest = ac.createMediaStreamDestination();
     var mediaRecorder = new MediaRecorder(dest.stream);
     osc.connect(dest);

     b.addEventListener("click", function(e) {
       if (!clicked) {
           mediaRecorder.start();
           osc.start(0);
           e.target.innerHTML = "Stop recording";
           clicked = true;
         } else {
           mediaRecorder.stop();
           osc.stop(0);
           e.target.disabled = true;
         }
     });

     mediaRecorder.ondataavailable = function(evt) {
       // それぞれの chunk(blobs)を配列に入れる
       chunks.push(evt.data);
     };

     mediaRecorder.onstop = function(evt) {
       // blob を作成し開く
       var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
       document.querySelector("audio").src = URL.createObjectURL(blob);
     };
    </script>
  </body>
</html>

メモ: Github で実際に動作する例を閲覧したり、ソースコードを読むことができます。

仕様

Specification
Web Audio API
# dom-audiocontext-createmediastreamdestination

ブラウザー互換性

BCD tables only load in the browser

参考