MediaStreamTrackAudioSourceNode - 表示 MediaStreamTrack 中提取的音频数据源

MediaStreamTrackAudioSourceNode 接口是一种 AudioNode，表示从通过 WebRTC 或 Media Capture 和 Streams API 获取的特定 MediaStreamTrack 中提取的音频数据源。音频本身可以从麦克风或其他音频采样设备输入，或者可以通过 RTCPeerConnection 以及其他可选选项接收。

MediaStreamTrackAudioSourceNode 没有输入，只有一个输出，并使用 AudioContext.createMediaStreamTrackSource() 方法创建。此接口类似于 MediaStreamAudioSourceNode，不同的是它允许您专门声明要使用的轨道，而不是假设流上的第一个音轨。

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

构造函数

new MediaStreamTrackAudioSourceNode()

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

属性

MediaStreamTrackAudioSourceNode 接口没有自己的属性；但是，它继承了其父接口 AudioNode 的属性。

方法

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

实例

在此实例中，我们从 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 MediaStreamTrackAudioSourceNode 的定义	工作草案	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 使用 Web Audio API
• WebRTC API
• Media Capture 和 Streams API（Media Streams）
• MediaStreamAudioSourceNode