tips / javascript

htmlのaudioを使用してサイト上でBGM音楽を流す

HTML5のaudio要素を使用して、プラグインなしでwebサイト上で簡単に音楽を再生する方法です。再生中の音声のON/OFFを制御するためのボタンも設置します。

音声の再生方法

音声を再生するだけであれば、audioタグで音声ファイルを読み込むだけです。音声ファイルの指定はaudioタグにsrc属性として記述するか、audioタグ内に入れたsourceタグのsrc属性で指定するかの2種類の方法があります。audioタグにオプションを追記することで、自動再生やループが可能になります。以下の例では音声は、音声ファイルが読み込まれると自動再生され、ループします。

音声の再生に対応していない場合は、代替コンテンツが表示されます。以下の例では「あなたのブラウザーは audio要素をサポートしていません。」の部分が表示されます。

HTML
<audio src="ファイル名.mp3" autoplay loop>
  あなたのブラウザーは <code>audio</code>要素をサポートしていません。
</audio>

または

HTML
<audio autoplay loop>
  <source src="ファイル名.mp3">
  あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
</audio>

音楽のON/OFFを制御するボタンの設置方法

次に音声のON/OFFを制御するボタンを設置します。webサイトで音声を再生する場合、サイトの訪問者がどんな環境で閲覧するかわからないので、ON/OFFの切り替えができるボタンなどを用意しておいたほうが、ユーザーにとっても親切です。

音声の再生/一時停止はJavaScriptで行います。再生/一時停止を制御するためにaudioタグに任意のidを指定します。

JavaScript
//音声の再生
document.getElementById('audio').play();

//音声の一時停止
document.getElementById('audio').pause();

音声のON/OFF用のボタンの見た目もCSSで扱いやすくするために、ボタンとaudioタグを同じdivで囲みます。ボタンをクリックすることでdivに任意のclass名が追加/削除されるようにし、このclass名の有無によって音声の再生のON/OFFを切り替えます。

HTML
<div class="audio_wrap">
  <div class="audio_button"></div>
  <audio id="audio" src="7971.mp3" loop>
    あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
  </audio>
</div>
JavaScript
$(function () {
  var audioBtn = $('.audio_button'),
  audioWrap = $('.audio_wrap'),
  audio = document.getElementById('audio');

  audioBtn.on('click', function () {
    if( audioWrap.hasClass('play') ) {
      audio.pause();
      audioWrap.removeClass('play');
    } else {
      audio.play();
      audioWrap.addClass('play');
    }
  });
});

「htmlのaudioを使用してサイト上でBGM音楽を流す」のデモはこちら

参考 : 「audio 要素」, <https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio> (参照2017-10-24)

参考 : 「フリーBGM(音楽素材)無料ダウンロード|DOVA-SYNDROME」, <https://dova-s.jp> (参照2017-10-24)

< Prev PostNext Post >