From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../createmediastreamsource/index.html | 180 +++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 files/zh-cn/web/api/audiocontext/createmediastreamsource/index.html (limited to 'files/zh-cn/web/api/audiocontext/createmediastreamsource') diff --git a/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.html b/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.html new file mode 100644 index 0000000000..8ded5b30d6 --- /dev/null +++ b/files/zh-cn/web/api/audiocontext/createmediastreamsource/index.html @@ -0,0 +1,180 @@ +--- +title: AudioContext.createMediaStreamSource() +slug: Web/API/AudioContext/createMediaStreamSource +translation_of: Web/API/AudioContext/createMediaStreamSource +--- +

{{ APIRef("Web Audio API") }}

+ +
+

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

+
+ +

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

+ +

语法

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

参数

+ +
+
stream
+
一个{{domxref("MediaStream")}} 对象，把他传入一个音频处理器进行操作
+
+ +

返回

+ +

 {{domxref("MediaStreamAudioSourceNode")}}

+ +

示例

+ +

本例中，我们从 {{ domxref("navigator.getUserMedia") }}获取媒体 (audio + video) 流,，把它传入 {{ htmlelement("video") }}中播放，并把视频调成静音，然后把获取到的audio传入 {{ domxref("MediaStreamAudioSourceNode") }}。接下来我们把获取到的audio传入{{ domxref("BiquadFilterNode") }} (可以把声音转化为低音)，输出到 {{domxref("AudioDestinationNode") }}.

+ +

{{ htmlelement("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和自带的控制器控制。

+
+ + + +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createMediaStreamSource-MediaStreamAudioSourceNode-MediaStream-mediaStream', 'createMediaStreamSource()')}}{{Spec2('Web Audio API')}}
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

查看更多

+ + -- cgit v1.2.3-54-g00ecf