From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/body/arraybuffer/index.html | 108 +++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 files/ja/web/api/body/arraybuffer/index.html (limited to 'files/ja/web/api/body/arraybuffer/index.html') diff --git a/files/ja/web/api/body/arraybuffer/index.html b/files/ja/web/api/body/arraybuffer/index.html new file mode 100644 index 0000000000..2cbc474ddc --- /dev/null +++ b/files/ja/web/api/body/arraybuffer/index.html @@ -0,0 +1,108 @@ +--- +title: Body.arrayBuffer() +slug: Web/API/Body/arrayBuffer +tags: + - API + - ArrayBuffer + - BODY + - Experimental + - Fetch + - Method + - Reference +translation_of: Web/API/Body/arrayBuffer +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Body")}} ミックスインの arrayBuffer() メソッドは、{{domxref("Response")}} ストリームを取得して、完全に読み取ります。 {{jsxref("ArrayBuffer")}} で解決される promise を返します。

+ +

構文

+ +
response.arrayBuffer().then(function(buffer) {
+  // buffer を使用した何らかの処理
+});
+ +

パラメーター

+ +

なし。

+ +

戻り値

+ +

{{jsxref("ArrayBuffer")}} で解決される promise。

+ +

例

+ +

音楽の演奏

+ +

fetch array buffer のライブでは、Play ボタンを配置して、押下されると getData() 関数が実行されるようになっています。 再生する前に音声ファイル全体をダウンロードすることに注意してください。 ダウンロード中に演奏を開始したい（つまりストリーム再生したい）なら、次のように {{domxref("HTMLAudioElement")}} を使いましょう。

+ +
new Audio("music.ogg").play();
+
+ +

getData() 関数内では、{{domxref("Request.Request","Request()")}} コンストラクターを使用して新しいリクエストを作成し、それを使用して OGG 音声トラックをフェッチします。 また、{{domxref("AudioContext.createBufferSource")}} を使用して、音声バッファーソースを作成します。 フェッチが成功したら、arrayBuffer() を使用してレスポンスから {{jsxref("ArrayBuffer")}} を読み取り、{{domxref("AudioContext.decodeAudioData")}} を使用して音声データをデコードし、デコードされたデータを音声バッファーソースのバッファー（source.buffer）として設定し、それから {{domxref("AudioContext.destination")}} にソースを接続します。

+ +

getData() の実行が完了すると、start(0) で音声ソースの再生を開始し、それから再生中に再度再生ボタンをクリックできないようにするために（これはしばしばエラーの原因になります）ボタンを無効化しています。

+ +
function getData() {
+  source = audioCtx.createBufferSource();
+
+  var myRequest = new Request('viper.ogg');
+
+  fetch(myRequest).then(function(response) {
+    return response.arrayBuffer();
+  }).then(function(buffer) {
+    audioCtx.decodeAudioData(buffer, function(decodedData) {
+      source.buffer = decodedData;
+      source.connect(audioCtx.destination);
+    });
+  });
+};
+
+// wire up buttons to stop and play audio
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+ +

ファイルを読む

+ +

{{domxref("Response.Response","Response()")}} コンストラクターは、{{domxref("File")}} と {{domxref("Blob")}} を受け入れるため、{{domxref("File")}} を他の形式に読み込むために使用できます。

+ +
function readFile(file) {
+  return new Response(file).arrayBuffer();
+}
+
+ +
<input type="file" onchange="readFile(this.files[0])">
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}{{Spec2('Fetch')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Body.arrayBuffer")}}

+ +

関連情報

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