JavaScript
初心者
WebAudioAPI
React
PWA

Web Audio API を試してみた

作ったもの

ボタンを押したら、音が出たり止まったりするだけ。

サンプルデモはこちら
ソースコードはこちら

参考資料

前提として

サイトをPWA化する上で音の再生に HTML5 Audio タグのままでは不都合があるので、Web Audio API を利用することにした。

sound.js
new Audio('sound.mp3').play();  // NG
  • モバイルブラウザではタップなどのユーザアクションからの駆動でないと動作しない
  • 同時に流せる音声は1音のみ
  • モバイル端末では音の強弱や消音がコードからコントロールできない

順を追って

(1) AudioContext を作成する

App.js
window.AudioContext = window.AudioContext || window.webkitAudioContext;
const context = new AudioContext();

オーディオコンテキストはオーディオ処理やデコードを行うノードの作成を制御します。 Web Audioで何かする前に AudioContext を作成する必要があります。全てのできごとはコンテキストの中で起こるのです。*1

(2) メモリ上にある音声データ (AudioBuffer) を扱うオーディオソースを作成する

App.js
let source = context.createBufferSource();

createBufferSource()メソッドは、AudioBufferオブジェクトに書き込まれた音声データを再生するAudioBufferSourceNodeを生成します。 *2

(3) XMLHttpRequest を使って音をロードする

App.js
let request = new XMLHttpRequest();
request.responseType = 'arraybuffer';  // レスポンスタイプは 'arraybuffer'

request.onreadystatechange = () => {

  // decodeAudioData()メソッドは、
  // ArrayBufferに書き込まれたオーディオファイルデータを非同期にデコードする
  context.decodeAudioData(request.response, (buffer) => {

    // オーディオソースのバッファにデコード済みの buffer を格納
    source.buffer = buffer;

    // 入力点と出力点を接続
    source.connect(context.destination);

    // ループも出来るでよ
    source.loop = true;

    // 次項(4)参照
    source.start(0);
  });
};

// リクエストを初期化
request.open('GET', 'sound.mp3', true);

// リクエストを送信
request.send();

(4) 音を再生する・停止する

App.js
// AudioBufferSourceNode.start(開始時期, オフセット, 再生長さ)
source.start(0);

// AudioBufferSourceNode.stop(停止時期)
source.stop(0);

(5) 利用が終了したらコンテキストを閉じる

App.js
context.close();

その他のドキュメント