MediaStreamAudioSourceNode - 一种 AudioNode，它作为音频源运行

MediaStreamAudioSourceNode 接口是一种 AudioNode，它作为音频源运行，其媒体是从使用 WebRTC 或 Media Capture 和 Streams API 获得的 MediaStream 接收的。该媒体可以来自麦克风（通过 getUserMedia()），也可以来自 WebRTC 呼叫上的远程对等方（使用 RTCPeerConnection 的音轨）。

MediaStreamAudioSourceNode 没有输入，只有一个输出，它是使用 AudioContext.createMediaStreamSource() 方法创建的。

MediaStreamAudioSourceNode 从第一个类型属性的值为 audio 的 MediaStreamTrack 获取音频。有关轨道顺序的更多信息，请参阅轨道顺序。

节点输出的通道数等于所选音频轨道中找到的轨道数。

输入数量	0
输出数量	1
通道数	由传递给创建它的 AudioContext.createMediaStreamSource() 方法的第一个音频 MediaStreamTrack 定义

构造函数

new MediaStreamAudioSourceNode()

使用指定的选项创建一个新的 MediaStreamAudioSourceNode 对象实例。

属性

除了以下属性之外，MediaStreamAudioSourceNode 还继承了其父接口 AudioNode 的属性。

mediaStream 只读

构造该 MediaStreamAudioSourceNode 时使用的 MediaStream。

方法

从其父接口 AudioNode 继承了方法。

异常

InvalidStateError

mediaStream 参数指定的流不包含任何音轨时抛出。

使用注意

通常，您可能不应该使用此类型的节点。它已被更可预测的 MediaStreamTrackAudioSourceNode 所取代，MediaStreamTrackAudioSourceNode 具有更好定义的规则，来用于选择轨道输出的方式。

如果你选择使用 MediaStreamAudioSourceNode ，你应该记住以下几点。

轨道顺序

流上音频轨道的顺序是通过获取其 kind 为 audio 的轨道，然后按照其 id 属性值以 Unicode 代码点排序 (基本上，对于简单的字母数字字符串的 ID，按字母或词典排序）。

第一个轨道是当轨道的 ID 全部按 Unicode 代码点排序时，其 id 排在最前面的轨道。

但是，有个很重要的事要注意，在此接口首次引入 Web Audio API之后，过了很久才加上此排序的规则。因此，您不能轻易依赖任何两个浏览器或浏览器版本之间的顺序匹配。这就是为什么使用 MediaStreamTrackAudioSourceNode 通常更明智，它提供了类似的功能，但在添加到规范时有更好的定义，因此它更可靠。

实例

在此实例中，我们从 navigator.getUserMedia 中获取媒体（音频 + 视频）流，将媒体提供给 <video> 元素进行播放，然后将音频静音，但随后也将音频输入 MediaStreamAudioSourceNode。接下来，我们将此源音频提供给低通 BiquadFilterNode（有效地用作低音增强器）和 AudioDestinationNode。

<video> 元素下方的范围滑块控制为低通滤波器提供的增益量 - 增加滑块的值以使音频声音更重低音！

注意：您可以看到在线运行的实例或查看源代码

var pre = document.querySelector('pre');
var video = document.querySelector('video');
var myScript = document.querySelector('script');
var range = document.querySelector('input');

// getUserMedia 块 - 抓取流将其放入 MediaStreamAudioSourceNode，也将视觉效果输出到视频元素
if (navigator.mediaDevices) {
    console.log('支持 getUserMedia。');
    navigator.mediaDevices.getUserMedia ({audio: true, video: true})
    .then(function(stream) {
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
            video.play();
            video.muted = true;
        };

        // 创建 MediaStreamAudioSourceNode，将 HTMLMediaElement 导入其中
        var audioCtx = new AudioContext();
        var source = audioCtx.createMediaStreamSource(stream);

        // 创建一个 biquadfilter
        var biquadFilter = audioCtx.createBiquadFilter();
        biquadFilter.type = "lowshelf";
        biquadFilter.frequency.value = 1000;
        biquadFilter.gain.value = range.value;

        // 将 AudioBufferSourceNode 连接到 gainNode，将 gainNode 连接到目标，这样我们就可以播放音乐并使用鼠标光标调整音量
        source.connect(biquadFilter);
        biquadFilter.connect(audioCtx.destination);

        // 移动鼠标时获取新的鼠标指针坐标，然后设置新的增益值
        range.oninput = function() {
            biquadFilter.gain.value = range.value;
        }
    })
    .catch(function(err) {
        console.log('发生以下 gUM 错误: ' + err);
    });
} else {
   console.log('您的浏览器不支持 getUserMedia！');
}

注意：作为调用 createMediaStreamSource() 的结果，来自媒体流的音频回放将被重新路由到 AudioContext 的处理中。因此，仍然可以通过媒体元素 API 和播放器控件来播放/暂停流。

规范

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

桌面浏览器兼容性

移动浏览器兼容性

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

相关链接

• 使用 Web Audio API
• WebRTC API
• Media Capture 和 Streams API (Media Streams)
• MediaStreamTrackAudioSourceNode