AudioProcessingEvent

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

AudioProcessingEvent はウェブオーディオ API のインターフェイスで、ScriptProcessorNode 入力バッファーが処理可能な状態になったときに発生するイベントを表します。

このインターフェイスを持つ audioprocess イベントは、音声処理が必要なときに ScriptProcessorNode で発生します。音声処理中、入力バッファーが読み込まれ、処理されて出力音声データが生成され、出力バッファーに書き込まれます。

警告: この機能は非推奨となったので、AudioWorklet で置き換えてください。

Event AudioProcessingEvent

コンストラクター

AudioProcessingEvent()

新しい AudioProcessingEvent オブジェクトを生成します。

インスタンスプロパティ

親プロパティである Event から継承されたプロパティも実装しています。

playbackTime 読取専用

double 型で、音声が再生される時間を表します。 AudioContext.currentTime の時刻で定義されます。

inputBuffer 読取専用

処理する入力音声データを含むバッファーである AudioBuffer を指定します。 チャンネル数はファクトリーメソッド AudioContext.createScriptProcessor() の引数 numberOfInputChannels として定義されています。 なお、返された AudioBuffer は、イベントハンドラーのスコープ内のみで有効であることに注意してください。

outputBuffer 読取専用

出力する音声データを書き込むバッファーである AudioBuffer を指定します。 チャンネル数はファクトリーメソッド AudioContext.createScriptProcessor() の引数 numberOutputChannels として定義されています。 なお、返された AudioBuffer は、イベントハンドラーのスコープ内のみで有効であることに注意してください。

例

次の例は、ScriptProcessorNode を使用して、AudioContext.decodeAudioData() で読み込んだ音声をAudioDestinationNode で処理し、入力トラック（バッファー）の各音声サンプルにホワイトノイズを追加し、AudioDestinationNode を通して再生する方法を示しています。 各チャンネルと各サンプルフレームに対して、scriptNode.onaudioprocess 関数は関連する audioProcessingEvent を受け取り、それを用いて入力バッファー内の各チャンネルと各チャンネル内の各サンプルをループし、少量のホワイトノイズを追加してから、その結果をそれぞれのケースで出力サンプルに設定します。

メモ: 完全な動作する例は、GitHub の script-processor-node リポジトリーを参照してください（ソースコードにもアクセスできます）。

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);
};

ブラウザーの互換性

BCD tables only load in the browser

関連情報