「BGMを流したい！あ、ちなみにレスポンシブ対応で！」そんな無茶ぶりをするクライアント案件で実装した機能です。
クライアントの要望
今回は、HTML5のaudioタグをカスタマイズして使用。デフォルトのコントロールバーだと独特なサイトの雰囲気をぶち壊すので、自分で作成したボタン画像を使用して、BGMの「ON」と「OFF」の切り替え（正確にはミュートの切り替え）を可能にしてます。
BGMの「ON」と「OFF」の切り替えにはJavaScriptを使用。あとは、PCとスマホではaudioタグの動作が違うので、それぞれに対応させました。またJavaScriptをレスポンシブ対応させるために下記の仕組みを活用。
さらにさらに、サイト訪問時にいきなり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タグのカスタマイズなどは前回記事を参考にしてください。
クリックで画像を切り替える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以上に嫌がられるのでお勧めはしません。
記事のコメント