Web/API/AudioProcessingEvent 以下を更新・新規翻訳

files/ja/web/api/audioprocessingevent/audioprocessingevent/index.md

@@ -0,0 +1,50 @@
+---
+title: "AudioProcessingEvent: AudioProcessingEvent() コンストラクター"
+short-title: AudioProcessingEvent()
+slug: Web/API/AudioProcessingEvent/AudioProcessingEvent
+l10n:
+  sourceCommit: 339595951b78774e951b1a9d215a6db6b856f6b2
+---
+
+{{APIRef}}{{Deprecated_header}}
+
+**`AudioProcessingEvent()`** コンストラクターは、constructor creates a new {{domxref("AudioProcessingEvent")}} object.
+
+> **メモ:** 通常、このコンストラクターはコードから直接呼び出されることはありません。ブラウザー自身がオブジェクトを作成し、イベントハンドラーに提供するからです。
+
+## 構文
+
+```js-nolint
+new AudioProcessingEvent(type, options)
+```
+
+### 引数
+
+- `type`
+  - : 文字列で、このイベントの名前です。
+    大文字小文字の区別があり、ブラウザーは常に `audioprocess` と設定します。
+- `options`
+  - : 以下のプロパティを持つオブジェクトです。
+    - `playbackTime`
+      - : 数値で、音声が再生される時を表します。
+    - `inputBuffer`
+      - : {{domxref("AudioBuffer")}} で、入力する音声データが入ります。
+    - `outputBuffer`
+      - : {{domxref("AudioBuffer")}} で、出力する音声データが書き込まれるところです。
+
+### 返値
+
+新しい {{domxref("AudioProcessingEvent")}} です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("AudioProcessingEvent")}}
+- {{domxref("ScriptProcessorNode")}}

files/ja/web/api/audioprocessingevent/index.md

@@ -1,39 +1,119 @@
 ---
 title: AudioProcessingEvent
 slug: Web/API/AudioProcessingEvent
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
 ---
 
-{{APIRef("Web Audio API")}}
+{{APIRef("Web Audio API")}}{{deprecated_header}}
 
-[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) の `AudioProcessingEvent` は {{domxref("ScriptProcessorNode")}} 入力バッファーが処理可能な状態になったときに発生するイベントを表します。
+`AudioProcessingEvent` は[ウェブオーディオ API](/ja/docs/Web/API/Web_Audio_API) のインターフェイスで、{{domxref("ScriptProcessorNode")}} 入力バッファーが処理可能な状態になったときに発生するイベントを表します。
 
-> **メモ:** 2014 年 8 月 29 日のウェブオーディオ API 仕様書公開時点で、この機能は非推奨とされ、まもなく [AudioWorklet](https://webaudio.github.io/web-audio-api/#audioworklet) に置き換わる予定です。
+このインターフェイスを持つ `audioprocess` イベントは、音声処理が必要なときに {{domxref("ScriptProcessorNode")}} で発生します。音声処理中、入力バッファーが読み込まれ、処理されて出力音声データが生成され、出力バッファーに書き込まれます。
+
+> **警告:** この機能は非推奨となったので、[`AudioWorklet`](/ja/docs/Web/API/AudioWorklet) で置き換えてください。
 
 {{InheritanceDiagram}}
 
 ## コンストラクター
 
-- `AudioProcessingEvent()`
+- {{domxref("AudioProcessingEvent.AudioProcessingEvent", "AudioProcessingEvent()")}} {{Deprecated_Inline}}
   - : 新しい `AudioProcessingEvent` オブジェクトを生成します。
 
-## プロパティ
+## インスタンスプロパティ
 
 _親プロパティである {{domxref("Event")}} から継承されたプロパティも実装しています_。
 
-- `playbackTime` {{ReadOnlyInline}}
+- {{domxref("AudioProcessingEvent.playbackTime", "playbackTime")}} {{ReadOnlyInline}} {{Deprecated_Inline}}
   - : double 型で、音声が再生される時間を表します。 {{domxref("BaseAudioContext/currentTime", "AudioContext.currentTime")}} の時刻で定義されます。
-- `inputBuffer` {{ReadOnlyInline}}
+- {{domxref("AudioProcessingEvent.inputBuffer", "inputBuffer")}} {{ReadOnlyInline}} {{Deprecated_Inline}}
   - : 処理する入力音声データを含むバッファーである {{domxref("AudioBuffer")}} を指定します。
     チャンネル数はファクトリーメソッド {{domxref("BaseAudioContext/createScriptProcessor", "AudioContext.createScriptProcessor()")}} の引数 `numberOfInputChannels` として定義されています。
     なお、返された <code>AudioBuffer</code> は、イベントハンドラーのスコープ内のみで有効であることに注意してください。
-- `outputBuffer` {{ReadOnlyInline}}
+- {{domxref("AudioProcessingEvent.outputBuffer", "outputBuffer")}} {{ReadOnlyInline}} {{Deprecated_Inline}}
   - : 出力する音声データを書き込むバッファーである {{domxref("AudioBuffer")}} を指定します。
     チャンネル数はファクトリーメソッド {{domxref("BaseAudioContext/createScriptProcessor", "AudioContext.createScriptProcessor()")}} の引数 <code>numberOutputChannels</code> として定義されています。
     なお、返された <code>AudioBuffer</code> は、イベントハンドラーのスコープ内のみで有効であることに注意してください。
 
 ## 例
 
-`AudioProcessingEvent` を使用したコード例は [`BaseAudioContext.createScriptProcessor()`](/ja/docs/Web/API/BaseAudioContext/createScriptProcessor#例) を参照してください。
+次の例は、`ScriptProcessorNode` を使用して、{{domxref("BaseAudioContext/decodeAudioData", "AudioContext.decodeAudioData()")}} で読み込んだ音声を{{domxref("AudioDestinationNode")}} で処理し、入力トラック（バッファー）の各音声サンプルにホワイトノイズを追加し、{{domxref("AudioDestinationNode")}} を通して再生する方法を示しています。 各チャンネルと各サンプルフレームに対して、`scriptNode.onaudioprocess` 関数は関連する `audioProcessingEvent` を受け取り、それを用いて入力バッファー内の各チャンネルと各チャンネル内の各サンプルをループし、少量のホワイトノイズを追加してから、その結果をそれぞれのケースで出力サンプルに設定します。
+
+> **メモ:** 完全な動作する例は、GitHub の [script-processor-node](https://mdn.github.io/webaudio-examples/script-processor-node/) リポジトリーを参照してください（[ソースコード](https://github.com/mdn/webaudio-examples/blob/master/script-processor-node/index.html)にもアクセスできます）。
+
+```js
+const myScript = document.querySelector("script");
+const myPre = document.querySelector("pre");
+const playButton = document.querySelector("button");
+
+// Create AudioContext and buffer source
+const audioCtx = new AudioContext();
+const source = audioCtx.createBufferSource();
+
+// Create a ScriptProcessorNode with a bufferSize of 4096 and a single input and output channel
+const scriptNode = audioCtx.createScriptProcessor(4096, 1, 1);
+console.log(scriptNode.bufferSize);
+
+// load in an audio track via XHR and decodeAudioData
+
+function getData() {
+  request = new XMLHttpRequest();
+  request.open("GET", "viper.ogg", true);
+  request.responseType = "arraybuffer";
+  request.onload = () => {
+    const audioData = request.response;
+
+    audioCtx.decodeAudioData(
+      audioData,
+      (buffer) => {
+        myBuffer = buffer;
+        source.buffer = myBuffer;
+      },
+      (e) => console.error(`Error with decoding audio data: ${e.err}`),
+    );
+  };
+  request.send();
+}
+
+// Give the node a function to process audio events
+scriptNode.onaudioprocess = (audioProcessingEvent) => {
+  // The input buffer is the song we loaded earlier
+  const inputBuffer = audioProcessingEvent.inputBuffer;
+
+  // The output buffer contains the samples that will be modified and played
+  const outputBuffer = audioProcessingEvent.outputBuffer;
+
+  // Loop through the output channels (in this case there is only one)
+  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
+    const inputData = inputBuffer.getChannelData(channel);
+    const outputData = outputBuffer.getChannelData(channel);
+
+    // Loop through the 4096 samples
+    for (let sample = 0; sample < inputBuffer.length; sample++) {
+      // make output equal to the same as the input
+      outputData[sample] = inputData[sample];
+
+      // add noise to each output sample
+      outputData[sample] += (Math.random() * 2 - 1) * 0.2;
+    }
+  }
+};
+
+getData();
+
+// Wire up the play button
+playButton.onclick = () => {
+  source.connect(scriptNode);
+  scriptNode.connect(audioCtx.destination);
+  source.start();
+};
+
+// When the buffer source stops playing, disconnect everything
+source.onended = () => {
+  source.disconnect(scriptNode);
+  scriptNode.disconnect(audioCtx.destination);
+};
+```
 
 ## ブラウザーの互換性
 

files/ja/web/api/audioprocessingevent/inputbuffer/index.md

@@ -0,0 +1,56 @@
+---
+title: "AudioProcessingEvent: inputBuffer プロパティ"
+short-title: inputBuffer
+slug: Web/API/AudioProcessingEvent/inputBuffer
+l10n:
+  sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+---
+
+{{APIRef}}{{Deprecated_header}}
+
+**`inputBuffer`** は {{domxref("AudioProcessingEvent")}} インターフェイスの読み取り専用プロパティで、音声処理イベントの入力バッファーを表します。
+
+入力バッファーは {{domxref("AudioBuffer")}} オブジェクトで表されます。このオブジェクトは音声チャンネルの集合を格納し、各チャンネルは一連の振幅としてエンコードされた音声信号波形を表す浮動小数点数の値の配列です。チャンネルの数と各チャンネルの長さは `AudioBuffer` のチャンネル数とバッファーサイズのプロパティによって決まります。
+
+## 値
+
+{{domxref("AudioBuffer")}} オブジェクトです。
+
+## 例
+
+この例では、{{domxref("ScriptProcessorNode")}} が 256 サンプルのバッファーサイズ、2 つの入力チャンネル、2 つの出力チャンネルで作成されています。{{domxref("ScriptProcessorNode/audioprocess_event", "audioprocess")}} イベントが発行されると、入力バッファーと出力バッファーがイベントオブジェクトから取得されます。入力バッファー内の音声データが処理され、結果が出力バッファーに書き込まれます。この場合、音声データは 0.5 倍に縮小されます。
+
+```js
+const audioContext = new AudioContext();
+const processor = audioContext.createScriptProcessor(256, 2, 2);
+
+processor.addEventListener("audioprocess", (event) => {
+  const inputBuffer = event.inputBuffer;
+  const outputBuffer = event.outputBuffer;
+
+  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
+    const inputData = inputBuffer.getChannelData(channel);
+    const outputData = outputBuffer.getChannelData(channel);
+
+    // Process the audio data here
+    for (let i = 0; i < outputBuffer.length; i++) {
+      outputData[i] = inputData[i] * 0.5;
+    }
+  }
+});
+
+processor.connect(audioContext.destination);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("AudioProcessingEvent.outputBuffer")}}
+- {{domxref("ScriptProcessorNode")}}

files/ja/web/api/audioprocessingevent/outputbuffer/index.md

@@ -0,0 +1,56 @@
+---
+title: "AudioProcessingEvent: outputBuffer プロパティ"
+short-title: outputBuffer
+slug: Web/API/AudioProcessingEvent/outputBuffer
+l10n:
+  sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+---
+
+{{APIRef}}{{Deprecated_header}}
+
+**`outputBuffer`** は {{domxref("AudioProcessingEvent")}} インターフェイスの読み取り専用プロパティで、音声処理イベントの出力バッファーを表します。
+
+出力バッファーは {{domxref("AudioBuffer")}} オブジェクトで表されます。このオブジェクトは音声チャンネルの集合を格納し、各チャンネルは一連の振幅としてエンコードされた音声信号波形を表す浮動小数点数の値の配列です。チャンネルの数と各チャンネルの長さは `AudioBuffer` のチャンネル数とバッファーサイズのプロパティによって決まります。
+
+## 値
+
+{{domxref("AudioBuffer")}} オブジェクトです。
+
+## 例
+
+この例では、{{domxref("ScriptProcessorNode")}} が 256 サンプルのバッファーサイズ、2 つの入力チャンネル、2 つの出力チャンネルで作成されています。{{domxref("ScriptProcessorNode/audioprocess_event", "audioprocess")}} イベントが発行されると、入力バッファーと出力バッファーがイベントオブジェクトから取得されます。入力バッファー内の音声データが処理され、結果が出力バッファーに書き込まれます。この場合、音声データは 0.5 倍に縮小されます。
+
+```js
+const audioContext = new AudioContext();
+const processor = audioContext.createScriptProcessor(256, 2, 2);
+
+processor.addEventListener("audioprocess", (event) => {
+  const inputBuffer = event.inputBuffer;
+  const outputBuffer = event.outputBuffer;
+
+  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
+    const inputData = inputBuffer.getChannelData(channel);
+    const outputData = outputBuffer.getChannelData(channel);
+
+    // Process the audio data here
+    for (let i = 0; i < outputBuffer.length; i++) {
+      outputData[i] = inputData[i] * 0.5;
+    }
+  }
+});
+
+processor.connect(audioContext.destination);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("AudioProcessingEvent.inputBuffer")}}
+- {{domxref("ScriptProcessorNode")}}

files/ja/web/api/audioprocessingevent/playbacktime/index.md

@@ -0,0 +1,55 @@
+---
+title: "AudioProcessingEvent: playbackTime プロパティ"
+short-title: playbackTime
+slug: Web/API/AudioProcessingEvent/playbackTime
+l10n:
+  sourceCommit: 135b8311a5e3d12789e8421845be3ce026ef72b8
+---
+
+{{APIRef}}{{Deprecated_header}}
+
+**`playbackTime`** は {{domxref("AudioProcessingEvent")}} インターフェイスのプロパティで、音声が再生される時間を表します。 これは {{domxref("AudioContext")}} が使用している時間と同じ座標系です。
+
+## 値
+
+数値で、整数とは限りません。
+
+## 例
+
+```js
+const audioContext = new AudioContext();
+const processor = audioContext.createScriptProcessor(256, 2, 2);
+
+processor.addEventListener("audioprocess", (event) => {
+  const inputBuffer = event.inputBuffer;
+  const outputBuffer = event.outputBuffer;
+
+  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
+    const inputData = inputBuffer.getChannelData(channel);
+    const outputData = outputBuffer.getChannelData(channel);
+
+    // Log the corresponding time for this audio buffer
+    console.log(`Received audio data to be played at ${event.playbackTime}`);
+
+    // Process the audio data here
+    for (let i = 0; i < outputBuffer.length; i++) {
+      outputData[i] = inputData[i] * 0.5;
+    }
+  }
+});
+
+processor.connect(audioContext.destination);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("AudioProcessingEvent")}}
+- {{domxref("ScriptProcessorNode")}}