audioタグを使ってBGMが流れる機能を実装！レスポンシブでスマホにも対応させる！

「BGMを流したい！あ、ちなみにレスポンシブ対応で！」そんな無茶ぶりをするクライアント案件で実装した機能です。

クライアントの要望
- 仕様の整理
HTMLコード
クリックで画像を切り替えるJavascript
PC用のJavascript
スマホ用のJavascript
再生状態からスタートする場合

クライアントの要望

今回は、HTML5のaudioタグをカスタマイズして使用。デフォルトのコントロールバーだと独特なサイトの雰囲気をぶち壊すので、自分で作成したボタン画像を使用して、BGMの「ON」と「OFF」の切り替え（正確にはミュートの切り替え）を可能にしてます。

BGMの「ON」と「OFF」の切り替えにはJavaScriptを使用。あとは、PCとスマホではaudioタグの動作が違うので、それぞれに対応させました。またJavaScriptをレスポンシブ対応させるために下記の仕組みを活用。

レスポンシブサイトに使える！画面サイズで読み込むJavascriptを切り替えるjs

レスポンシブウェブデザインでサイト作成をする際に便利な、画面サイズ指定に応じたjavascriptを読み込む条件分岐です。CSS同様にpx（ピクセル）指定で切り替えが可能。

さらにさらに、サイト訪問時にいきなりBGMが流れると離脱率が怖いので、最初はミュートで開始。そんでもって、BGMは自動で再生されて、一時停止ではなくミュート。つまり、BGMは止まらないい無限ループ。クッソwww

仕様の整理

再生位置や音量が表示されるデフォルトのコントロールバーは使わない
オリジナル画像でBGMのON・OFFボタンにする
ONボタンとOFFボタンはそれぞれ表示するのではなく1つの画像が切り替わる
このボタンを押せばミュートにできたり音を出せたり出来るようにする
BGMは自動再生され無限ループする
レスポンシブ対応
スマホはaudioタグの挙動がPCと違うのでフレキシブルに対応

HTMLコード

<script type="text/javascript">
jQuery(document).ready(function($) {
    //PCの場合
    if (window.matchMedia( '(min-width: 769px)' ).matches) {
        $.ajax({
            url: 'js/bgm_pc.js',
            dataType: 'script',
            cache: false
       });
    //スマホの場合
    } else {
        $.ajax({
            url: 'js/bgm_sp.js',
            dataType: 'script',
            cache: false
        });
    };
});
</script>

<span class="bgm_btn_pc"><!--PC用-->
<audio id="sound" autoplay loop muted preload="auto"><source src="audio/sample.mp3"></audio>
<a onclick="mute();"><img class="imgChange" src="img/common/play-btn_off.png"></a>
</span>

<span class="bgm_btn_sp"><!--スマホ用-->
<audio id="sound_sp" preload="metadata"
onpause="console.log('pause');"
onplay="console.log('play');">
<source src="audio/sample.mp3" type="audio/x-mp3">
</audio>
<a onclick="play();"><img class="imgChange" src="img/common/play-btn.png"></a><br>
<a class="d_block mt10" onclick="pause();"><img class="imgChange" src="img/common/play-btn_off.png"></a>
</span>

PC用とスマホ用で切り替えるため、画面サイズで切り替えるCSSのdisplay:none;で表示・非表示。CSSはデフォルトのコントロールは使用せず、Javascriptでミュート機能を実装。

さらに、クリックによって画像が切り替わるように。audioタグのカスタマイズなどは前回記事を参考にしてください。

HTML5のaudioタグが再生されない？操作できない？そんな時の対処法

HTML5で実装された、簡単に音楽ファイルを再生することが出来るaudioタグについてのメモです。スマートフォンやタブレットなどでの注意点も。

クリックで画像を切り替えるJavascript

//on off img
function smartRollover() {
	if(document.getElementsByTagName) {
		var images = document.getElementsByTagName("img");
		for(var i=0; i < images.length; i++) {
			if(images[i].getAttribute("src").match("_off.")) {
				images[i].onmouseover = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
				}
				images[i].onmouseout = function() {
					this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
				}
			}
		}
	}
}
if(window.addEventListener) {
	window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
	window.attachEvent("onload", smartRollover);
}

common.jsのような名前でPCとスマホの両方に読み込ませます。

PC用のJavascript

var TARGET = document.getElementById('sound');
function mute(){
    if(TARGET.muted){
        TARGET.muted = false;
    }else{
        TARGET.muted = true;
    }
}

$(function(){
    $(".imgChange").click(function(){
        var imgSrc = $(this).attr("src");

        if($(this).attr("class") == "imgChange_on"){
            $(this).attr("class", "imgChange_off")
            imgSrc = imgSrc.replace(/(_on)/, '')
            $(this).attr("src", imgSrc)

            return
        }

        $(this).attr("class", "imgChange_on")
        $(this).attr("src", imgSrc.replace(/(\.gif|\.jpg|\.png)/g, '_on$1'))

    });
});

PC用に読み込むbgm_pc.jsの中身。クリックで画像が入れ替わり、かつミュートのON・OFFになるようにしています。

スマホ用のJavascript

var TARGET = document.getElementById('sound_sp');

function play(){
    TARGET.play();   
}

function pause(){
    TARGET.pause();   
}

スマホ用に読み込むbgm_sp.jsの中身。ON用の画像をタップすると再生（ミュート解除）、OFF用の画像をタップすると停止（ミュート）となるように指定しています。

再生状態からスタートする場合

ミュート開始ではなく、離脱率とかいいから再生状態で開始したい場合は下記に変更。PCのミュートを解除して、画像はONをデフォルトに。

<span class="bgm_btn_pc"><!--PC用-->
<audio id="sound" autoplay loop preload="auto"><source src="audio/sample.mp3"></audio>
<a onclick="mute();"><img class="imgChange" src="img/common/play-btn.png"></a>
</span>

<span class="bgm_btn_sp"><!--スマホ用-->
<audio id="sound_sp" preload="metadata"
onpause="console.log('pause');"
onplay="console.log('play');">
<source src="audio/sample.mp3" type="audio/x-mp3">
</audio>
<a onclick="play();"><img class="imgChange" src="img/common/play-btn.png"></a><br>
<a class="d_block mt10" onclick="pause();"><img class="imgChange" src="img/common/play-btn_off.png"></a>
</span>

ちなみに、スマホは公共の場での使用を想定してか、audioタグでの自動再生は出来ないようです。やり方によっては可能かもしれませんが、いきなりの音楽再生は、PC以上に嫌がられるのでお勧めはしません。