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
|
---
title: AudioContext.createMediaElementSource()
slug: Web/API/AudioContext/createMediaElementSource
translation_of: Web/API/AudioContext/createMediaElementSource
---
<p>{{ APIRef("Web Audio API") }}</p>
<div>
<p>{{ domxref("AudioContext") }} 接口的 <code>createMediaElementSource() 方法用于创建一个新的 </code>{{ domxref("MediaElementAudioSourceNode") }} 对象,输入某个存在的 HTML {{htmlelement("audio")}} or {{htmlelement("video")}} 元素, 对应的音频即可被播放或者修改.</p>
</div>
<p>为寻求更多关于媒体元素音频源节点的具体信息,请查阅 {{ domxref("MediaElementAudioSourceNode") }} 参考页.</p>
<h2 id="语法">语法</h2>
<pre class="brush: js">var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(myMediaElement);</pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>myMediaElement</code></dt>
<dd>某个被期待被录入音频处理图修改的 {{domxref("HTMLMediaElement")}} 对象.</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>一个 {{domxref("MediaElementAudioSourceNode")}} 对象.</p>
<h2 id="示例">示例</h2>
<p>该示例由 {{htmlelement("audio") }} 元素,通过使用 <code>createMediaElementSource() 方法,</code>创建了一个音源,将其通过 {{ domxref("GainNode") }} 节点,输出到{{ domxref("AudioDestinationNode") }} 节点以播放.当鼠标指针移动时, <code>updatePage()</code> 函数被调用,该函数计算当前鼠标Y坐标与页面高度的比值, 改变 {{ domxref("GainNode") }} 节点的值以调整音量.您就可以通过鼠标上下移动而改变音乐的音量了.</p>
<div class="note">
<p><strong>Note</strong>: 您也可以 <a href="http://mdn.github.io/webaudio-examples/media-source-buffer/">浏览该示例的在线演示</a>, 或者 <a href="https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer">浏览源代码</a>.</p>
</div>
<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
pre.innerHTML = myScript.innerHTML;
// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);
// Create a gain node
var gainNode = audioCtx.createGain();
// Create variables to store mouse pointer Y coordinate
// and HEIGHT of screen
var CurY;
var HEIGHT = window.innerHeight;
// Get new mouse pointer coordinates when mouse is moved
// then set new gain value
document.onmousemove = updatePage;
function updatePage(e) {
CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
gainNode.gain.value = CurY/HEIGHT;
}
// connect the AudioBufferSourceNode to the gainNode
// and the gainNode to the destination, so we can play the
// music and adjust the volume using the mouse cursor
source.connect(gainNode);
gainNode.connect(audioCtx.destination);</pre>
<div class="note">
<p><strong>Note</strong>: 作为调用<code> createMediaElementSource() </code>的结果,{{domxref("HTMLMediaElement")}} 的播放将会由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-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}</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</td>
<td>
<p>6.0{{property_prefix("webkit")}}</p>
<p>- buggy! not working -</p>
</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>
<p>{{CompatUnknown}}</p>
<p>- buggy! not working -</p>
</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>
|
