JavaScript で wav データを AudioContext で再生する

背景

react アプリケーションで音声ファイルを再生しようとしたが、react から audio オブジェクトを操作する方法がわからなかったところ、調べてみると AudioContext というaudioオブジェクトをより低レイヤで操作できるようなインターフェースがあることがわかったのでそちらで音声ファイルを再生することにした

用語

AudioBuffer ... 45秒未満の短い音声を表すために設計された型, AudioBufferSourceNode に渡すことで再生できる

AudioBufferSourceNode ... AudioBuffer に保存されたメモリー内の音声データからなる音声ソースを表す、メモリから読みだした再生するタイミングに高い正確性が求められる音声を繰り返し再生する場合に適したインターフェース。音声データをディスクやネットワークから読み込む必要がある場合は AudioWorkletNode の方が適切らしい?

実装

code:javascript

// すでにBlob型に変換したデータが変数 blob に格納されているとする

const audiocontext = new AudioContext; // window.AudioContext || window.webkitAudioContext

// blobデータを arrayBuffer に変換した後, audioBuffer に変換

const audioBuffer = await audiocontext.decodeAudioData(await blob.arrayBuffer());

// AudioBufferSourceNode を得る

const source = audiocontext.createBufferSource();

// audioBuffer を AudioBufferSourceNode に渡す

source.buffer = audioBuffer;

// AudioBufferSourceNode を出力先に接続すると音声が聞こえるようになる

source.connect(audiocontext.destination);

// 再生

source.start();

参考

https://qiita.com/keiskimu/items/fe8a3924ff7203a6dd73