AudioContext.createMediaStreamDestination()

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

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

詳細は MediaStreamAudioDestinationNode のページを参照してください。

構文

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

戻り値

MediaStreamAudioDestinationNode

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

ボタンをクリックするとオシレーター(振動子)が開始し、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 で実際に動作する例を閲覧したり、ソースコードを読むことができます。

仕様

仕様書 策定状況 コメント
Web Audio API
createMediaStreamDestination() の定義
草案

ブラウザー互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
createMediaStreamDestinationChrome 完全対応 14Edge 完全対応 79Firefox 完全対応 25IE 未対応 なしOpera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 26Opera Android 完全対応 14Safari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応

参考