MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

MediaStreamAudioSourceNode

MediaStreamAudioSourceNode 接口代表一个音频接口,是WebRTC MediaStream (比如一个摄像头或者麦克风)的一部分。是个表现为音频源的AudioNode

MediaElementSourceNode没有输入,并且只有一个输出。创建之后使用 AudioContext.createMediaStreamSource方法。输出通道的数量和AudioMediaStreamTrack的通道数量相同。如果没有有效的媒体流,输出通道就变成一个静音的通道。

Number of inputs 0
Number of outputs 1
Channel count AudioMediaStreamTrack定义,传递给 AudioContext.createMediaStreamSource ,并由此创建。

构造器

MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()
创建一个新的MediaStreamAudioSourceNode实例。

属性

AudioNode上继承。

方法

AudioNode上继承。

示例

本例中,我们从 navigator.getUserMedia获取媒体 (audio + video) 流,,把它传入 <video>中播放,并把视频调成静音,然后把获取到的audio传入 MediaStreamAudioSourceNode。接下来我们把获取到的audio传入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
// 输出到video元素

if (navigator.mediaDevices) {
    console.log('getUserMedia supported.');
    navigator.mediaDevices.getUserMedia ({audio: true, video: true})
    .then(function(stream) {
        video.srcObject = stream;
        video.onloadedmetadata = function(e) {
            video.play();
            video.muted = true;
        };

        // 创建MediaStreamAudioSourceNode
        // Feed the HTMLMediaElement into it
        var audioCtx = new AudioContext();
        var source = audioCtx.createMediaStreamSource(stream);

        // 创建二阶滤波器
        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);

        // Get new mouse pointer coordinates when mouse is moved
        // then set new gain value

        range.oninput = function() {
            biquadFilter.gain.value = range.value;
        }
    })
    .catch(function(err) {
        console.log('The following gUM error occured: ' + err);
    });
} else {
   console.log('getUserMedia not supported on your browser!');
}

// dump script to pre element

pre.innerHTML = myScript.innerHTML;

注意: 调用createMediaStreamSource(), 来自于媒体流的音频回放将被重新传到AudioContext的处理器中。所以播放/暂停流仍然是可以通过media元素的API和自带的控制器控制。

 

规范

Specification Status Comment
Web Audio API
MediaStreamAudioSourceNode
Working Draft  

兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 14 webkit (Yes) 25 (25) 未实现 15 webkit
22 (unprefixed)
6 webkit
Constructor (Yes) ? 未实现 未实现 ? 未实现
Feature Android Chrome Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 未实现 28 webkit (Yes) 25.0 (25) 未实现 未实现 webkit
Constructor 未实现 (Yes) ? 未实现 未实现 ? 未实现

See also

文档标签和贡献者

 此页面的贡献者: maicss
 最后编辑者: maicss,