Web Audio API は、Webのオーディオプログラミングを簡素化することを目的とした抽象化レイヤーです。

この短い紹介では、Web Audio APIのAudioContextと、ブラウザーをレトロシンセサイザーに変換するために使用できる単純なオシレーターを作成するAudioContextインスタンスの機能について学習します。 このチュートリアルのコードスニペットはChromeでテストされていますが、お気に入りのブラウザの開発者ツールのconsoleを使用してフォローすることもできます。

準備作業

前述のように、Web Audio APIのサポートは普遍的ではないため、ユーザーのブラウザーでAPIが使用可能であることを確認することをお勧めします。

let audioContext;

try {
  audioContext =
    new (window.AudioContext || window.webkitAudioContext)();
} catch (error) {
  window.alert(
    `Sorry, but your browser doesn't support the Web Audio API!`
  );
}

if (audioContext !== undefined) {
  /* Our code goes here */
}

この簡単なチェックの後、WebAudioAPIの機能を安全に使用できます。

AudioContextについて

audioContextAudioContextのインスタンス)を一種のDJとして想像すると役立つ場合があります。これは、オーディオソースのコレクションを調整し、ソースが右側のユーザーのスピーカーから再生されるようにします。時間と正しい「音」で。 また、DJのように、audioContextは、音源とホストマシンのオーディオハードウェアである「サウンドシステム」との間の仲介役と考えることができます。 AudioContextを使用する際に留意すべき点は、次のとおりです。

  • AudioContextはマスターの「タイムキーパー」です。 すべての信号は、audioContext.currentTimeを基準にしてスケジュールする必要があります。
  • AudioContextのインスタンスは、オーディオソースを最初から作成できます。

シンプルなオシレーター

自分で生成できる音の種類を確認するには、audioContextを使用してOscillatorNodeを作成します。

const oscillator = audioContext.createOscillator();

AudioContextOscillatorNodeのブラウザで音を出すために必要なのはこれだけです。 ただし、最初に、oscillatoraudioContextに「配線」する必要があります。

oscillator.connect(audioContext.destination);

Web Audio APIは、アナログシグナルチェーンを模倣しようとします。 入力信号(oscillator)をデジタルパワーアンプ(audioContext)にパイプし、スピーカー(destination)に信号を渡します。

いくつかの音を立てましょう:

oscillator.start();

ダイヤルトーンに匹敵する音が聞こえるはずです。 おめでとうございます。WebAudioAPIを使用して音楽を作成しています。 もちろん、誰も同じピッチを永遠に聞きたくないのです。 oscillatorは、次の方法で停止できます。

oscillator.stop();

AudioNodeが停止すると、再開することはできません。 再生を再開するには、新しいAudioNodeを作成する必要があります。

startメソッドとstopメソッドはどちらも、タイプnumberの単一のパラメーターを受け入れます。 パラメータ値は、開始/停止イベントをスケジュールするために使用されます。

/* Emit a signal 10 seconds from now */
oscillator.start(audioContext.currentTime + 10);

/* Cancel the signal 10 seconds after that */
oscillator.stop(audioContext.currentTime + 20);

最後に、oscillatorを操作してさまざまな音を出します。

AudioParamsでサウンドを操作する

oscillatorオブジェクトをログに記録すると、次のようになります(特定のプロパティ値は、デバイス/ブラウザーによって異なる場合があるため、省略されています)。

console.log(oscillator);
/*
  {
    channelCount: number,
    context: AudioContext,
    detune: AudioParam,
    type: 'sine' | 'sawtooth' | 'triangle' | 'square'
    frequency: AudioParam,
    numberOfInputs: number,
    numberOfOutputs: number,
    onended: function
    ...
  }
*/

私たちの目的にとって最も重要なプロパティはoscillator.frequencyです。

console.log(oscillator.frequency);
/*
  {
    defaultValue: number,
    maxValue: number,
    minValue: number,
    value: number // Probably 440 (A4)
  }
*/

oscillatorfrequency値は、AudioParamインターフェースを実装します。 oscillatorなどのAudioNodeのサウンドは、AudioParamプロパティを介して操作できます。 ただし、AudioParam valueプロパティへの直接の再割り当ては廃止され、ヘルパーメソッドが採用されました。

/* Don't do this */
oscillator.frequency.value = 500;

oscillatorで「A」ではなく「Bb」を出力する場合は、次のようにする必要があります。

/* The frequency (in Hz) of Bb4 is 466.16 */
oscillator
  .frequency
  .setValueAtTime(466.16, audioContext.currentTime);

また

/* Slowly transition to Bb4 over the span of 10 seconds */
oscillator
  .frequency
  .exponentialRampToValueAtTime(
      466.16,
      audioContext.currentTime + 10
  );

ボーナス:周期波形の調整

oscillatorは、周期的な波形を使用してトーンを放出します。 波形は、OscillatorNodeインターフェイスのtypeプロパティで表されます。 デフォルトでは、type'sine'です。 ほとんどのブラウザは、'sawtooth''triangle'、および'square'の少なくとも3つのオプションをサポートしています。 したがって、oscillatorの「トーン」の変更は次のように簡単です。

oscillator.type = 'triangle';

結論

Web Audio APIのおかげで、ブラウザでのオーディオの生成と操作がこれまでになく簡単になりました。 その助けを借りて、Web開発者は3〜5行のコードでレトロなシンセトーンを再現できます。

🎶課題:Web Audio APIを使用して、 Funkytown からリフをプログラムしてください!