MediaStreamAudioDestinationNode - 表示一个音频目标

MediaElementAudioDestinationNode 接口表示一个音频目标,包括 WebRTC MediaStream 和一个 AudioMediaStreamTrack,可以类似于从 Navigator.getUserMedia 获得的 MediaStream 使用。

它是一个 AudioNode,充当音频目标,使用 AudioContext.createMediaStreamDestination 方法创建。

输入数量 1
输出数量 0
通道数 2
通道计数模式 "explicit"
通道解释 "speakers"

构造函数

MediaStreamAudioDestinationNode.MediaStreamAudioDestinationNode()")

创建一个新的 MediaStreamAudioDestinationNode 对象实例。

属性

从它的父接口 AudioNode 继承了属性。

MediaStreamAudioDestinationNode.stream

一个 MediaStream,包含单个AudioMediaStreamTrack,其节点数与节点本身相同。您可以使用此属性从音频图形中获取流并将其提供给另一个构造,例如 Media Recorder

方法

从它的父接口 AudioNode 继承了方法。

实例

在下面的简单实例中,我们创建了一个 MediaStreamAudioDestinationNode,一个OscillatorNode 和一个 MediaRecorder(该实例因此只能工作此时在 Firefox 和 Chrome 中。) MediaRecorder 设置为记录来自 MediaStreamDestinationNode 的信息。

单击按钮时,振荡器启动,并启动 MediaRecorder。当按钮停止时,振荡器和 MediaRecorder 都停止。停止 MediaRecorder 会导致触发 dataavailable 事件,事件数据被推入 chunks 数组。之后,触发 stop 事件,生成一个新的 blob 的 opus 类型 - 它包含 chunks 数组中的数据,然后打开一个新窗口(tab),指向该 blob 创建的 URL。

从这里,您可以播放和保存 opus 文件。

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

    <p>将纯正弦波编码为 Opus 文件</p>
    <button>制作正弦波</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 = "停止录音";
           clicked = true;
         } else {
           mediaRecorder.stop();
           osc.stop(0);
           e.target.disabled = true;
         }
     });

     mediaRecorder.ondataavailable = function(evt) {
       // 将每个块(blob)推入数组中
       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>

注意:您可以在线查看此实例研究源代码

规范

规范 状态 备注
Web Audio API
MediaStreamAudioDestinationNode 的定义
工作草案 -

桌面浏览器兼容性

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持14 支持25 不支持156
MediaStreamAudioDestinationNode() constructor551 未知53 不支持42 未知
stream14 支持25 不支持156

移动浏览器兼容性

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持1414 支持26 未知15 未知
MediaStreamAudioDestinationNode() constructor551551 未知53 未知42 未知
stream 支持14 支持26 未知15 未知

1. 在 Chrome 59 之前,不支持默认值。

相关链接