先日紹介した 『Web Audio API で音を再生しよう』 は, 音楽ファイル(.mp3や.wav)を読み込む前提の方法でした.

今回は, Data URI Scheme のデータを読み込んでそれを音楽用のバッファに変換して Web Audio API で使う方法を紹介したいと思います.

この方法であれば, ファイルに埋め込めるようになるのでクロスドメインの制約に引っかからなくなります!

Runstant Demo

デモです. ボタンを押すとビーっと音が再生されるのがわかるかと思います.

Flow

1. 音楽データを用意する

wav なり mp3 なりを Data URI Scheme に変換します.

var DATA = 'data:audio/wav;base64,UklGRnoGA...';  

先日作った下記のツールを使えばカンタンに変換できます.

Web Tool - File to Data URI Scheme | phiary

2. Data URI Scheme を ArrayBuffer に変換

Data URI Scheme を ArrayBuffer に変換するメソッドを定義します.

// data url scheme を buffer に変換
var data2buffer = function(data) {  
  var byteString = atob(data.split(',')[1])
  var len = byteString.length;
  var buffer = new Uint8Array(len);
  for (var i=0; i<len; ++i) {
    buffer[i] = byteString.charCodeAt(i);
  }
  return buffer.buffer;
};

3. Audio 用のバッファにデコードする

1 で作成した Data URI Scheme を 2 で定義したメソッドに渡すことで buffer を作成できます.

それを decodeAudioData に渡して実行することで Audio 用のバッファを作成することができます.

context.decodeAudioData(data2buffer(DATA), function(buffer) {  
  AudioBuffer = buffer;
});

あとはファイルで再生したときと同様に createBufferSource で作成した source のバッファとして使用することで音を再生することができます.

// source を作成
var source = context.createBufferSource();  
// バッファをセット
source.buffer = AudioBuffer;  
// context を connect
source.connect(context.destination);  
// play
source.start(0);