Audio オブジェクトを利用してサウンドを再生する - JavaScript

JavaScriptのAudio オブジェクトを利用してサウンドを再生するコードを紹介します。

サウンドの再生

サウンドの再生をするコードです。

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    var audioElem;

    function PlaySound() {
      audioElem = new Audio();
      audioElem.src = "sound2.mp3";
      audioElem.play();
    }
    function StopSound(){
      audioElem.pause();
    }
  </script>
</head>
<body>
  <a href="javascript:void(0);" onclick="PlaySound();">再生</a><br/>
  <a href="javascript:void(0);" onclick="StopSound();">停止</a><br />
</body>
</html>

解説

再生リンクをクリックすると、JavaScriptのPlaySound()関数が実行されます。
  audioElem = new Audio();
により、Audioオブエジェクトを作成します。

  audioElem.src = "sound2.mp3";
Audioオブエジェクトのインスタンスのsrcプロパティに再生するサウンド名を設定します。この場合は同じディレクトリに配置されている"sound2.mp3"ファイルを再生します。パスの指定は相対パスでも指定可能です。

  audioElem.play();
play()メソッドを呼び出すと再生を開始します。

  audioElem.pause();
サウンドの停止は、pause()メソッドです。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


再生リンクをクリックすると、サウンドが再生されます。


停止リンクをクリックすると、サウンド再生が停止します。

音量を変更する

音量を変化させる場合は、Audioオブエジェクトのvolumeプロパティに値を設定します。値の範囲は0~1.0の範囲です。

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <script type="text/javascript">
    var audioElem;

    function PlaySound() {
      audioElem = new Audio();
      audioElem.src = "sound2.mp3";
      audioElem.play();
    }
    function StopSound(){
      audioElem.pause();
    }

    function Volume(flag) {
      if (0 < flag) {
        if (0.9 < audioElem.volume) {
          audioElem.volume = 1;
        } else {
          audioElem.volume += 0.1;
        }
      } else {
        if (audioElem.volume < 0.1) {
          audioElem.volume = 0;
        }
        else {
          audioElem.volume -= 0.1;
        }
      }
    }

  </script>
</head>
<body>
  <a href="javascript:void(0);" onclick="PlaySound();">再生</a><br/>
  <a href="javascript:void(0);" onclick="StopSound();">停止</a><br />
  <a href="javascript:void(0);" onclick="Volume(1);">音量を上げる</a><br />
  <a href="javascript:void(0);" onclick="Volume(-1);">音量を下げる</a><br />
</body>
</html>

実行結果

HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。[再生]リンクをクリックするとサウンドの再生が始まります。[音量を上げる][音量を下げる]リンクをクリックすると音量が変化します。

注意
Internet Explorerの場合、初期値は1.0(最大になっている)のため、[音量を上げる]リンクをクリックしても音量は変化しません。

著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
掲載日: 2015-10-17
iPentec all rights reserverd.