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

AudioContext.createMediaStreamSource()

这篇翻译不完整。请帮忙从英语翻译这篇文章

AudioContext接口的createMediaStreamSource()方法用于创建一个新的MediaStreamAudioSourceNode 对象, 需要传入一个媒体流对象(MediaStream对象)(可以从 navigator.getUserMedia 获得MediaStream对象实例), 然后来自MediaStream的音频就可以被播放和操作。

更多关于媒体流音频源(media stream audio source nodes)的细节, 请参考MediaStreamAudioSourceNode 页面.

语法

var audioCtx = new AudioContext();
var source = audioCtx.createMediaStreamSource(stream);

参数

stream
一个MediaStream 对象,把他传入一个音频处理器进行操作

Returns

 MediaStreamAudioSourceNode

示例

本例中,我们从 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
createMediaStreamSource()
Working Draft  

浏览器兼容性

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 10.0webkit (Yes) 25.0 (25.0)  未实现 15.0webkit
22 (unprefixed)
6.0webkit
Feature Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) 26.0 1.2 ? ? ? 33.0

查看更多

文档标签和贡献者

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