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

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

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

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

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

過去記事:レスポンシブサイトに使える!画面サイズで読み込むJavascriptを切り替えるjs

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

要件の整理

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

HTML

PC用とスマホ用で切り替えるため、画面サイズで切り替えるCSSのdisplay:none;で表示・非表示。CSSはデフォルトのコントロールは使用せず、Javascriptでミュート機能を実装。さらに、クリックによって画像が切り替わるように。audioタグのカスタマイズなどは前回記事を参考にしてください。

過去記事:再生されない?操作できない?HTML5のaudioタグを使用する時の注意点

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

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

PC用のJavascript

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

スマホ用のJavascript

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

早い話しデモを見て下さい

どんな事をやったのか伝わりませんよね。とりあえずデモを見て下さい。右下の追尾する赤いボタンがON・OFFです。スマホの場合は音源ファイルの読み込みラグがあります。

デモ / DEMO

音源:魔王魂(ボス戦BGM)

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

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

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

あくまで自分が理解できるレベルでまとめたので、今回の情報だけではマネできないかもしれません。どうしても仕組みを知りたいい場合はコメントから連絡下さい。データを丸々送りますんで。

いいね!のお慈悲を…

この記事が良かったらシェアをお願いしゃっす!

コメント

  1. にし より:

     突然のコメント申し訳ありません。
    この度、audioタグを使ってBGMが流れる機能を紹介されていた記事を
    拝見いたしました。
     現在、独学でJavasprictの勉強中であるため
    宜しければ仕組みをお見せ頂ければ幸いです。
     よろしくお願いいたします。

記事の感想はこちら