diff options
Diffstat (limited to 'files/ja/web/api/baseaudiocontext/decodeaudiodata')
| -rw-r--r-- | files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html b/files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html new file mode 100644 index 0000000000..db9c106e52 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html @@ -0,0 +1,155 @@ +--- +title: AudioContext.decodeAudioData() +slug: Web/API/AudioContext/decodeAudioData +tags: + - API + - Audio + - AudioContext + - BaseAudioContext + - Method + - Reference + - Web Audio API + - decodeAudioData +translation_of: Web/API/BaseAudioContext/decodeAudioData +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p><code>decodeAudioData()</code> は {{ domxref("BaseAudioContext") }} のメソッドで、 {{domxref("ArrayBuffer")}} に書き込まれた音声ファイルデータを非同期にデコードするために使用されます。この場合、 <code>ArrayBuffer</code> は {{domxref("XMLHttpRequest")}} と {{domxref("FileReader")}} から読み込まれます。デコードされた {{domxref("AudioBuffer")}} は {{domxref("AudioContext")}} のサンプリングレートにリサンプリングされ、コールバックやプロミスに渡されます。</p> + +<p>この方法は、オーディオトラックから Web Audio API 用のオーディオソースを作成する際に推奨される方法です。この方法は、音声ファイルの断片的なデータではなく、完全なファイルデータに対してのみ動作します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p>古いコールバック構文:</p> + +<pre class="syntaxbox notranslate">baseAudioContext.decodeAudioData(<var>ArrayBuffer</var>, <var>successCallback</var>, <var>errorCallback</var>);</pre> + +<p>新しいプロミスベースの構文:</p> + +<pre class="syntaxbox notranslate">Promise<decodedData> baseAudioContext.decodeAudioData(<var>ArrayBuffer</var>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><var>ArrayBuffer</var></dt> + <dd>デコードする音声データが入った ArrayBuffer です。通常は{{domxref("XMLHttpRequest")}}, {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, {{domxref("FileReader")}} から取得します。</dd> + <dt><var>successCallback</var></dt> + <dd>デコードが完了すると呼び出されるコールバック関数です。このコールバックの引数は1つで、 <var>decodedData</var> (デコードされた PCM 音声データ) を表す {{domxref("AudioBuffer")}} です。通常は、デコードされたデータを {{domxref("AudioBufferSourceNode")}} に入れて、そこから再生したり、好きなように操作したりすることができます。</dd> + <dt><var>errorCallback</var></dt> + <dd>任意のエラーコールバックで、音声データのデコードでエラーが発生すると呼び出されます。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>なし、または <var>decodedData</var> で満足する {{domxref("Promise") }} オブジェクトで.</p> + +<h2 id="Example" name="Example">例</h2> + +<p>ここでは最初に古いコールバックベースのシステムを、次に新しいプロミスベースの構文を取り上げます。</p> + +<h3 id="Older_callback_syntax" name="Older_callback_syntax">古いコールバックベースの構文</h3> + +<p>この例では、 <code>getData()</code> 関数は XHR を使用して音声トラックを読み込み、リクエストの <code>responseType</code> を <code>arraybuffer</code> に設定して、レスポンスとして配列バッファーを返すようにして、それを <code>audioData</code> 変数に格納しています。それからこのバッファーを <code>decodeAudioData()</code> 関数に渡します。成功したコールバックは、デコードに成功した PCM データを受け取り、 {{ domxref("AudioContext.createBufferSource()") }} で作成した {{ domxref("AudioBufferSourceNode") }} に入れ、ソースを {{domxref("AudioContext.destination") }} に接続してループするように設定します。</p> + +<p>ボタンは単に <code>getData()</code> を実行して、それぞれトラックの読み込みと再生、停止を行うだけです。ソースの <code>stop()</code> メソッドが呼ばれると、ソースは消滅します。</p> + +<div class="note"> +<p><strong>注:</strong> <a href="https://mdn.github.io/webaudio-examples/decode-audio-data/">ライブ例の実行</a> (または<a href="https://github.com/mdn/webaudio-examples/tree/master/decode-audio-data">ソースの閲覧</a>) もできます。</p> +</div> + +<pre class="brush: js notranslate">// 変数の定義 + +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'); + +// 音声トラックの読み込みには XHR を使い、 +// decodeAudioData でデコードし、バッファーに格納する +// そして、そのバッファーを 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){ console.log("Error with decoding audio data" + e.err); }); + + } + + request.send(); +} + +// 音声の停止と再生を行うボタン + +play.onclick = function() { + getData(); + source.start(0); + play.setAttribute('disabled', 'disabled'); +} + +stop.onclick = function() { + source.stop(0); + play.removeAttribute('disabled'); +} + + +// pre要素にスクリプトを設定する + +pre.innerHTML = myScript.innerHTML;</pre> + +<h3 id="New_promise-based_syntax" name="New_promise-based_syntax">新しいプロミスベースの構文</h3> + +<pre class="brush: js notranslate">ctx.decodeAudioData(audioData).then(function(decodedData) { + // デコードしたデータをここで使う +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-decodeaudiodata', 'decodeAudioData()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.BaseAudioContext.decodeAudioData")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API の使用</a></li> +</ul> |