AudioContext: createMediaStreamDestination() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年4月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

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

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

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

構文

createMediaStreamDestination()

引数

なし。

返値

MediaStreamAudioDestinationNode です。

例

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

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

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

html

<!doctype html>
<html lang="en-US">
 <head>
 <meta charset="UTF-8" />
 <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>
 const b = document.querySelector("button");
 let clicked = false;
 const chunks = [];
 const ac = new AudioContext();
 const osc = ac.createOscillator();
 const dest = ac.createMediaStreamDestination();
 const mediaRecorder = new MediaRecorder(dest.stream);
 osc.connect(dest);
 b.addEventListener("click", (e) => {
 if (!clicked) {
 mediaRecorder.start();
 osc.start(0);
 e.target.textContent = "Stop recording";
 clicked = true;
 } else {
 mediaRecorder.stop();
 osc.stop(0);
 e.target.disabled = true;
 }
 });
 mediaRecorder.ondataavailable = (evt) => {
 // それぞれのチャンク (blob) を配列に入れる
 chunks.push(evt.data);
 };
 mediaRecorder.onstop = (evt) => {
 // blob を作成し開く
 const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
 document.querySelector("audio").src = URL.createObjectURL(blob);
 };
 </script>
 </body>
</html>

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