HTML5のaudio要素を使用して、プラグインなしでwebサイト上で簡単に音楽を再生する方法です。再生中の音声のON/OFFを制御するためのボタンも設置します。
htmlのaudioタグを使用した音声の再生方法
音声を再生するだけであれば、audioタグで音声ファイルを読み込むだけです。音声ファイルの指定はaudioタグにsrc属性として記述するか、audioタグ内に入れたsourceタグのsrc属性で指定するかの2種類の方法があります。audioタグにオプションを追記することで、自動再生やループが可能になります。以下の例では音声は、音声ファイルが読み込まれると自動再生され、ループします。
音声の再生に対応していない場合は、代替コンテンツが表示されます。以下の例では「あなたのブラウザーは audio要素をサポートしていません。」の部分が表示されます。
<audio src="ファイル名.mp3" autoplay loop>
あなたのブラウザーは <code>audio</code>要素をサポートしていません。
</audio>または
<audio autoplay loop>
<source src="ファイル名.mp3" />
あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
</audio>JavScriptで音楽のON/OFFを制御するボタンを設置する
次に音声のON/OFFを制御するボタンを設置します。webサイトで音声を再生する場合、サイトの訪問者がどんな環境で閲覧するかわからないので、ON/OFFの切り替えができるボタンなどを用意しておいたほうが、ユーザーにとっても親切です。
音声の再生/一時停止はJavaScriptで行います。再生/一時停止を制御するためにaudioタグに任意のidを指定します。
//音声の再生
document.getElementById("audio").play();
//音声の一時停止
document.getElementById("audio").pause();音声のON/OFF用のボタンの見た目もCSSで扱いやすくするために、ボタンとaudioタグを同じdivで囲みます。ボタンをクリックすることでdivに任意のclass名が追加/削除されるようにし、このclass名の有無によって音声の再生のON/OFFを切り替えます。
<div class="audio_wrap">
<div class="audio_button"></div>
<audio id="audio" src="7971.mp3" loop>
あなたのブラウザーは <code>audio</code> 要素をサポートしていません。
</audio>
</div>$(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音楽を流す」のデモはこちら