--- title: AudioContext.createMediaStreamDestination() slug: Web/API/AudioContext/createMediaStreamDestination tags: - API - AudioContext - Method - Reference - Référence(2) - Web Audio API - createMediaStreamDestination translation_of: Web/API/AudioContext/createMediaStreamDestination ---

{{ APIRef("Web Audio API") }}

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

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

詳細は {{domxref("MediaStreamAudioDestinationNode")}} のページを参照してください。

構文

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

戻り値

{{domxref("MediaStreamAudioDestinationNode")}}

例

次の簡単な例では、{{domxref("MediaStreamAudioDestinationNode")}}と{{ domxref("OscillatorNode") }}と{{ domxref("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 で実際に動作する例を閲覧したり、ソースコードを読むことができます。

仕様

仕様書 策定状況 コメント
{{SpecName('Web Audio API', '#dom-audiocontext-createmediastreamdestination', 'createMediaStreamDestination()')}} {{Spec2('Web Audio API')}}

ブラウザー互換性

{{Compat("api.AudioContext.createMediaStreamDestination")}}

参考