diff options
Diffstat (limited to 'files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html')
| -rw-r--r-- | files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html | 223 |
1 files changed, 223 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html new file mode 100644 index 0000000000..40693fd8cc --- /dev/null +++ b/files/zh-cn/web/api/baseaudiocontext/decodeaudiodata/index.html @@ -0,0 +1,223 @@ +--- +title: AudioContext.decodeAudioData() +slug: Web/API/AudioContext/decodeAudioData +tags: + - API + - Audio + - audio接口 + - 音频解码 +translation_of: Web/API/BaseAudioContext/decodeAudioData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>{{ domxref("AudioContext") }}接口的<code>decodeAudioData()方法可用于异步解码</code>音频文件中的 {{domxref("ArrayBuffer")}}. <code>ArrayBuffer数据可以通过</code>{{domxref("XMLHttpRequest")}}和{{domxref("FileReader")}}来获取. AudioBuffer是通过AudioContext采样率进行解码的,然后通过回调返回结果.</p> +</div> + +<p>这是从音频轨道创建用于web audio API音频源的首选方法。</p> + +<h2 id="语法">语法</h2> + +<p>旧版的回调函数语法</p> + +<pre class="syntaxbox">audioCtx.decodeAudioData(audioData, function(decodedData) { + // use the decoded data here +});</pre> + +<p>新版的promise-based语法:</p> + +<pre class="syntaxbox">audioCtx.decodeAudioData(audioData).then(function(decodedData) { + // use the decoded data here +});</pre> + +<h2 id="举例">举例</h2> + +<p>在本章节中，我们将首先学习基于回调的系统，然后采用新的基于promise-based的语法</p> + +<h3 id="旧的回调语法">旧的回调语法</h3> + +<p>在这个事例中, <code>getData()</code> 方法使用XHR加载一个音轨,设置请求的responsetype为ArrayBuffer使它返回一个arraybuffer数据，然后存储在audioData变量中. 然后我们将这个arraybuffer数据置于<code>decodeAudioData()方法中使用，当成功解码PCM Data后通过回调返回</code>, 将返回的结果通过{{ domxref("AudioContext.createBufferSource()") }}接口进行处理并获得一个{{ domxref("AudioBufferSourceNode") }}, 将源连接至{{domxref("AudioContext.destination") }}并将它设置为循环的.</p> + +<p>通过按钮来运行 <code>getData()</code> 来获取音轨并播放它. 当使用 <code>stop()</code> 方法后source将会被清除.</p> + +<div class="note"> +<p><strong>Note</strong>: You can <a href="http://mdn.github.io/decode-audio-data/">run the example live</a> (or <a href="https://github.com/mdn/decode-audio-data">view the source</a>.)</p> +</div> + +<pre class="brush: js">// define variables + +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var source; + +var pre = document.querySelector('pre'); +var myScript = document.querySelector('script'); +var play = document.querySelector('.play'); +var stop = document.querySelector('.stop'); + +// use XHR to load an audio track, and +// decodeAudioData to decode it and stick it in a buffer. +// Then we put the buffer into the source + +function getData() { + source = audioCtx.createBufferSource(); + var request = new XMLHttpRequest(); + + request.open('GET', 'viper.ogg', true); + + request.responseType = 'arraybuffer'; + + + request.onload = function() { + var audioData = request.response; + + audioCtx.decodeAudioData(audioData, function(buffer) { + source.buffer = buffer; + + source.connect(audioCtx.destination); + source.loop = true; + }, + + function(e){"Error with decoding audio data" + e.err}); + + } + + request.send(); +} + +// wire up buttons to stop and play audio + +play.onclick = function() { + getData(); + source.start(0); + play.setAttribute('disabled', 'disabled'); +} + +stop.onclick = function() { + source.stop(0); + play.removeAttribute('disabled'); +} + + +// dump script to pre element + +pre.innerHTML = myScript.innerHTML;</pre> + +<h3 id="新的promise-based语法">新的promise-based语法</h3> + +<pre class="brush: js">ctx.decodeAudioData(compressedBuffer).then(function(decodedData) { + // use the decoded data here +});</pre> + +<h2 id="参数">参数</h2> + +<dl> + <dt>ArrayBuffer</dt> + <dd>将会被解码的音频数据，可通过{{domxref("XMLHttpRequest")}}或{{domxref("FileReader")}}来获取.</dd> + <dt>DecodeSuccessCallback</dt> + <dd>当成功解码后会被调用的回调函数. 该回调函数只有一个AudioBuffer类型参数.</dd> + <dt>DecodeErrorCallback</dt> + <dd>一个可选的错误回调函数.</dd> +</dl> + +<h2 id="返回">返回</h2> + +<p>一个 {{domxref("Promise") }}对象.</p> + +<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-decodeAudioData-Promise-AudioBuffer--ArrayBuffer-audioData-DecodeSuccessCallback-successCallback-DecodeErrorCallback-errorCallback', 'decodeAudioData()')}}</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>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>{{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> + <tr> + <td>Promise-based syntax</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</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>{{CompatChrome(33.0)}}</td> + </tr> + <tr> + <td>Promise-based syntax</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> +</ul> |