blob: 8ded5b30d65e19199d2d63f2fc9f5d3040910b78 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
---
title: AudioContext.createMediaStreamSource()
slug: Web/API/AudioContext/createMediaStreamSource
translation_of: Web/API/AudioContext/createMediaStreamSource
---
<p>{{ APIRef("Web Audio API") }}</p>
<div>
<p>{{ domxref("AudioContext") }}接口的<code>createMediaStreamSource()方法用于创建一个新的</code>{{ domxref("MediaStreamAudioSourceNode") }} 对象, 需要传入一个媒体流对象(MediaStream对象)(可以从 {{ domxref("navigator.getUserMedia") }} 获得MediaStream对象实例), 然后来自MediaStream的音频就可以被播放和操作。</p>
</div>
<p>更多关于媒体流音频源(media stream audio source nodes)的细节, 请参考{{ domxref("MediaStreamAudioSourceNode") }} 页面.</p>
<h2 id="语法">语法</h2>
<pre class="brush: js">var audioCtx = new AudioContext();
var source = audioCtx.createMediaStreamSource(stream);</pre>
<h3 id="参数">参数</h3>
<dl>
<dt>stream</dt>
<dd>一个{{domxref("MediaStream")}} 对象，把他传入一个音频处理器进行操作</dd>
</dl>
<h3 id="返回">返回</h3>
<p> {{domxref("MediaStreamAudioSourceNode")}}</p>
<h2 id="示例">示例</h2>
<p>本例中，我们从 {{ domxref("navigator.getUserMedia") }}获取媒体 (audio + video) 流,，把它传入 {{ htmlelement("video") }}中播放，并把视频调成静音，然后把获取到的audio传入 {{ domxref("MediaStreamAudioSourceNode") }}。接下来我们把获取到的audio传入{{ domxref("BiquadFilterNode") }} (可以把声音转化为低音)，输出到 {{domxref("AudioDestinationNode") }}.</p>
<p>{{ htmlelement("video") }} 元素下面滑动杆控制低音过滤器过滤的程度，滑动杆的值越大，低音更明显</p>
<div class="note">
<p><span style="font-size: 14px;"><strong>注意：你可以查看</strong></span> <a href="https://mdn.github.io/webaudio-examples/stream-source-buffer/">在线演示</a>，或者 <a href="https://github.com/mdn/webaudio-examples/tree/master/stream-source-buffer">查看源码</a>。</p>
</div>
<pre class="brush: js;highlight[23]">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;</pre>
<div class="note">
<p><span style="font-size: 14px;"><strong>注意</strong></span>: 调用<code>createMediaStreamSource()</code>, 来自于媒体流的音频回放将被重新传到AudioContext的处理器中。所以播放/暂停流仍然是可以通过media元素的API和自带的控制器控制。</p>
</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Audio API', '#widl-AudioContext-createMediaStreamSource-MediaStreamAudioSourceNode-MediaStream-mediaStream', 'createMediaStreamSource()')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(25.0)}} </td>
<td>{{CompatNo}}</td>
<td>15.0{{property_prefix("webkit")}}<br>
22 (unprefixed)</td>
<td>6.0{{property_prefix("webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>26.0</td>
<td>1.2</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>33.0</td>
</tr>
</tbody>
</table>
</div>
<h2 id="查看更多">查看更多</h2>
<ul>
<li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
|
