音ファイルを再生してみる

↓こちらを参考にして音声ファイルを再生してみる。

test.html

<html>  
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <title>Web Audio API Getting Started</title>
    <meta name="description" content="html5,webaudioapi,javascript" />
    <style>
    #btn {
      font-size: 4rem;
      padding: 1rem 2rem;
    }
    </style>
    <script src='test.js'></script>
  </head>
  <body>
    <button id='btn'>Play</button>
  </body>
</html>

test.js

window.AudioContext = window.AudioContext || window.webkitAudioContext;  
var context = new AudioContext();

// Audio 用の buffer を読み込む
var getAudioBuffer = function(url, fn) {  
  var req = new XMLHttpRequest();
  // array buffer を指定
  req.responseType = 'arraybuffer';

  req.onreadystatechange = function() {
    if (req.readyState === 4) {
      if (req.status === 0 || req.status === 200) {
        // array buffer を audio buffer に変換
        context.decodeAudioData(req.response, function(buffer) {
          // コールバックを実行
          fn(buffer);
        });
      }
    }
  };

  req.open('GET', url, true);
  req.send('');
};

// サウンドを再生
var playSound = function(buffer) {  
  // source を作成
  var source = context.createBufferSource();
  // buffer をセット
  source.buffer = buffer;
  // context に connect
  source.connect(context.destination);
  // 再生
  source.start(0);
};

// main
window.onload = function() {  
  // サウンドを読み込む
  getAudioBuffer('test.wav', function(buffer) {
    // 読み込み完了後にボタンにクリックイベントを登録
    var btn = document.getElementById('btn');
    btn.onclick = function() {
      // サウンドを再生
      playSound(buffer);
    };
  });
};

再生終了のタイミングは、以下のイベントで取得する。

source.onended = function(){}