WEB上で指定のオーディオファイルを再生する方法 #JavaScript

概要

WEB上でオーディオファイルを再生する案件があったので、再生方法について調べた内容を記載します。

再生方法

audioタグ

１番簡単な方法です。
HTMLのタグにあるaudioタグを使うことで、オーディオファイルを再生することができます。
スマートフォンの場合、マナーモードをしていても音声が鳴ります。

■サンプルコード

<!DOCTYPE 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" />
  </head>

  <body>
　　　<!-- このファイルと同一階層にあるsample_sound.mp3というオーディオファイルを指定しています -->
      <audio controls src="sample_sound.mp3"></audio>
  </body>

</html>

■ 表示について
ブラウザ上だと以下のような感じで表示されます。
audioタグに対してcontrolsという属性をつけるとCSSなしで下記のようなメディアプレーヤーが表示されます。
メディアプレーヤーはブラウザによって表示が異なりますが、CSSである程度可変可能

・Chrome（PC）

・FireFox（PC）

Web Audio API(Javascript)

JavascriptのWeb APIを使うことでも再生することできます。
HTMLのaudioタグと違い、音声ファイルに対してエフェクトなどの加工や音自体を作ることができます。

ちなみにモバイルで検証したところ、以下のような挙動でした。
■iOS
マナーモード（サイレントスイッチ）をしていると消音になりました。
イヤホンをしている場合はマナーモード関係なく、音が聞こえます。
■Android
通常マナーモードでも音がなりました。
（この辺りは機種によって呼び方やモードの種類が違うと思いますので、ご参考程度に）

■ サンプルコード

<!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", "sample_sound.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>

■ 表示について
何もCSSを当ててないので、サンプルコードだと以下のように表示されます。

まとめ

音声ファイルを再生するだけならaudioタグが１番簡単
Web audio APIは再生よりも加工する必要がある場合に利用するのがベター