iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript サウンド Web Audio API

Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用)

方法1:ページ表示時にサウンドのHttpRequestを初期化する方法

ページ表示時にサウンドを取得するHttpRequestを初期化する方法です。再生するサウンドが決まっている場合はこの方法を用いると初期化がページ表示時に完了するため、素早くサウンドの再生ができます。

コード

以下のHTMLファイルを作成します。
また、HTMLファイルと同じフォルダに、再生するサウンドファイル sound2.mp3 を配置します。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />

  <script type="text/javascript">
    var request, source, stopflag=0;

    window.onload = function () {
      request = new XMLHttpRequest();
      request.open("GET", "sound2.mp3", true);
      request.responseType = "arraybuffer";
      request.onload = completeOnLoad;
      request.send();
    };

    function completeOnLoad() {
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      context = new AudioContext();
      
      // オーディオをデコード
      context.decodeAudioData(request.response, function (buf) {
        source.buffer = buf;
        source.loop = false;

      });

      source = context.createBufferSource();

      var elem = document.getElementById("Play");
      elem.addEventListener("click", playStart, false);

      var elem2 = document.getElementById("Pause");
      elem2.addEventListener("click", playPause, false);
    }

    function playStart() {
      source.connect(context.destination);
      source.start(0);
    }

    function playPause() {
        if (stopflag == 0) {
            context.suspend();
            stopflag = 1;
        } else {
            context.resume();
            stopflag = 0;
        }
    }

  </script>

</head>
<body>
  <a id="Play" href="javascript:void(0);">再生</a><br />
  <a id="Pause" href="javascript:void(0);">停止/再開</a><br />

</body>
</html>

解説

  window.onload = function () {
    request = new XMLHttpRequest();
    request.open("GET", "sound2.mp3", true);
    request.responseType = "arraybuffer";
    request.onload = completeOnLoad;
    request.send();
  };

ページ表示時に、HttpRequestを準備します。このHttpRequestでサウンドファイルにアクセスします。onloadイベントにcompleteOnLoad()関数を設定し、サウンドファイルの読み込みの完了後にcompleteOnLoad()関数を実行させます。

  function completeOnLoad() {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    context = new AudioContext();

    // オーディオをデコード
    context.decodeAudioData(request.response, function (buf) {
      source.buffer = buf;
      source.loop = false;
    });

    source = context.createBufferSource();

    var elem = document.getElementById("Play");
    elem.addEventListener("click", playStart, false);
  }

サウンドファイルの読み込み後、completeOnLoad関数が実行されます。new AudioContext();により、新しい、AucioContextオブジェクトを作成します。
context.decodeAudioData()はデコード処理を記述します。
context.createBufferSource()メソッドを呼び出し、サウンドの再生バッファソースを作成します。また、addEventListener()メソッドを呼び出し、再生リンクにclickイベントを設定しています。

  function playStart() {
    source.connect(context.destination);
    source.start(0);
  }

リンクがクリックされたときは、バッファへ接続し、サウンドの再生を開始します。

[停止/再開]リンクがクリックされた場合、サウンドが再生中の場合はcontext.suspend();メソッドを呼び出しサウンドを停止します。サウンドが停止中の場合は、context.resume(); メソッドを呼び出しサウンドを再生します。

  function playPause() {
    if (stopflag == 0) {
      context.suspend();
      stopflag = 1;
    } else {
      context.resume();
      stopflag = 0;
    }
  }

実行結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用):画像1

ページの[再生]リンクをクリックします。サウンドの再生が始まります。サウンド再生中は上部のタブの左端に[スピーカー]のアイコンが表示されます。
Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用):画像2

[停止/再開]リンクをクリックすると、サウンドが一時停止ます。もう一度クリックすると、停止した位置からサウンドが再開されます。サウンド一時停止の場合は、タブの左側に[スピーカー]のアイコンが表示されたままです。
Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用):画像3

方法2:リンククリックなどのアクションでHttpRequestを初期化する方法

方法1のページ表示時にHttpRequestを初期化する方法では再生ファイルが少ない場合は良いですが、再生するファイルの選択肢が増えるとすべてのサウンドに対してページ表示時に初期化する必要があり、ファイル数の数だけHttpRequestを用意する必要があります。再生できるサウンドの選択肢が多い場合は、リンクなどのアクション発生時にHttpRequestを初期化します。

コード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scale=yes, initial-scale=1.0, maximum-scale=5.0" />

  <script type="text/javascript">
    var request, source, stopflag=0;

    function playSound() {
      request = new XMLHttpRequest();
      request.open("GET", "sound2.mp3", true);
      request.responseType = "arraybuffer";
      request.onload = completeOnLoad;
      request.send();
    }

    function completeOnLoad() {
      context = new AudioContext();
      source = context.createBufferSource();

      // オーディオをデコード
      context.decodeAudioData(request.response, function (buf) {
        source.buffer = buf;
        source.loop = false;

      });

      source.connect(context.destination);
      source.start(0);
    }

    function playPause() {
        if (stopflag == 0) {
            context.suspend();
            stopflag = 1;
        } else {
            context.resume();
            stopflag = 0;
        }
    }
  </script>

</head>
<body>
  <a id="Play" href="javascript:void(0);" onclick="playSound();">再生</a><br />
  <a id="Pause" href="javascript:void(0);" onclick="playPause();">停止/再開</a><br />
</body>
</html>

解説

動作は、先の場合と同様です。HttpRequestの初期化が、再生リンクをクリックし、playSound()関数が実行されたタイミングで処理されます。初期化後、サウンドファイルの読み込みが完了し、completeOnLoad()関数が呼び出されると、デコード処理を設定し、バッファソースへの接続と再生を開始します。

モバイル端末での注意事項

このコードはMobile Safari ではタップの制約により動作しません。詳細は「iOSのMobile Safari でWeb Audio API を利用したサウンドが再生されない (タッチ制約による制限)」の記事を参照してください。

実行結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用):画像4

ページの[再生]リンクをクリックします。サウンドの再生が始まります。サウンド再生中は上部のタブの左端に[スピーカー]のアイコンが表示されます。
Web Audio API を利用してWebブラウザーでオーディオファイルを再生する (Microsoft Edge, Google Chrome用):画像5