diff --git a/files/ja/web/api/audioprocessingevent/audioprocessingevent/index.md b/files/ja/web/api/audioprocessingevent/audioprocessingevent/index.md new file mode 100644 index 00000000000000..15004df5760a8d --- /dev/null +++ b/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")}} diff --git a/files/ja/web/api/audioprocessingevent/index.md b/files/ja/web/api/audioprocessingevent/index.md index ed6f0f0c356f19..be00b658c2b0cd 100644 --- a/files/ja/web/api/audioprocessingevent/index.md +++ b/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` として定義されています。 なお、返された AudioBuffer は、イベントハンドラーのスコープ内のみで有効であることに注意してください。 -- `outputBuffer` {{ReadOnlyInline}} +- {{domxref("AudioProcessingEvent.outputBuffer", "outputBuffer")}} {{ReadOnlyInline}} {{Deprecated_Inline}} - : 出力する音声データを書き込むバッファーである {{domxref("AudioBuffer")}} を指定します。 チャンネル数はファクトリーメソッド {{domxref("BaseAudioContext/createScriptProcessor", "AudioContext.createScriptProcessor()")}} の引数 numberOutputChannels として定義されています。 なお、返された AudioBuffer は、イベントハンドラーのスコープ内のみで有効であることに注意してください。 ## 例 -`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); +}; +``` ## ブラウザーの互換性 diff --git a/files/ja/web/api/audioprocessingevent/inputbuffer/index.md b/files/ja/web/api/audioprocessingevent/inputbuffer/index.md new file mode 100644 index 00000000000000..839f8805354d97 --- /dev/null +++ b/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")}} diff --git a/files/ja/web/api/audioprocessingevent/outputbuffer/index.md b/files/ja/web/api/audioprocessingevent/outputbuffer/index.md new file mode 100644 index 00000000000000..215ee7d0e102c0 --- /dev/null +++ b/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")}} diff --git a/files/ja/web/api/audioprocessingevent/playbacktime/index.md b/files/ja/web/api/audioprocessingevent/playbacktime/index.md new file mode 100644 index 00000000000000..915460d07c80a9 --- /dev/null +++ b/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")}}