| title | short-title | slug | l10n | ||
|---|---|---|---|---|---|
AudioContext: createMediaStreamDestination() メソッド |
createMediaStreamDestination() |
Web/API/AudioContext/createMediaStreamDestination |
|
{{ APIRef("Web Audio API") }}
createMediaStreamDestination() は {{ domxref("AudioContext") }} インターフェイスのメソッドで、 WebRTC の {{domxref("MediaStream")}} と関連付けられた {{domxref("MediaStreamAudioDestinationNode")}} オブジェクトを生成します。この MediaStream はローカルファイルに格納されたり他のコンピューターに送信されたりする音声ストリームを表します。
{{domxref("MediaStream")}} はノードが生成されたときに作成され、{{domxref("MediaStreamAudioDestinationNode")}}の stream プロパティを通じてアクセスすることができます。このストリームは {{domxref("navigator.getUserMedia") }} で得られた MediaStream と同じような使い方ができます。例えば、RTCPeerConnection インターフェイスの addStream() メソッドでリモートの端末に送ることができます。
詳細は {{domxref("MediaStreamAudioDestinationNode")}} のページを参照してください。
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 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>Note
Github で実際に動作する例を閲覧したり、ソースコードを読むことができます。
{{Specifications}}
{{Compat}}