HTMLのaudio要素とJavaScriptでBGMのON/OFFの切り替えスイッチを作る

HTMLのaudio要素は、HTML5から新しい追加された要素で音声コンテンツを埋め込むことができます。音声メディアを再生できるだけあって、Webサイト内でBGMを流す時などで使うことがあるのではないでしょうか。

Webサイト内で音楽を流すことは特に問題ではないですが、Webページにアクセスした時にいきなり音楽が流れるとユーザーとしては都合が良くないことがあります。例えば電車の中だったり図書館だったり、突然音楽が流れたり音が出たら困る時があります。
そんな時にON/OFFのスイッチで切り替えることができらたいいですよね。BGMを流したい時にユーザーにスイッチをONにしてもらえば。

audio要素は一応、スマートフォンからのアクセス時には自動的にミュートになるように制御されているみたいです。

ということで、HTMLのaudio要素の音楽をON/OFFスイッチで切り替える方法をご紹介します。

audio要素の音楽をON/OFFスイッチで切り替え

まずはaudioのセットと切り替えのためのボタンを用意します。

HTML

<div id="Audio-Control">
  <audio id="bgm" preload autoplay loop muted>
      <source src="<?php bloginfo('template_url'); ?>/media/sample.ogg" type="audio/ogg">
      <source src="<?php bloginfo('template_url'); ?>/media/sample.mp3" type="audio/mpeg">
  </audio>
  <button onclick="enableMute()" class="off active" type="button">OFF</button>
  <button onclick="disableMute()" class="on" type="button">ON</button>
</div>

ページにアクセスした時に音楽がならないよう、audio要素にmuted属性を設定して最初はミュートにしておきましょう。
ボタンのON/OFFのデザインしやすいよう、クラスを付けておきます。
source要素の動画のパスはWebサイトに合わせてください。

次に、ボタンをCSSでデザイン。
ボタンはお好みでデザインしてください。
僕はそれっぽいものを作ってみました。
buttonタグを使うので、最初にスタイルをリセットします。

CSS

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

#Audio-Control {
  overflow: hidden;
}

#Audio-Control button {
  border: 1px solid #ccc;
  width: 40px;
  float: left;
  padding: 5px 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

#Audio-Control button.on {
  border-left: none;
}

#Audio-Control button.off {
  border-right: none;
}

#Audio-Control button.active {
  background: #ccc;
}

#Audio-Control button:not(.active):hover {
  background: rgba(204, 204, 204, 0.3);
}

次に、ボタンをクリックした時の処理をJavaScriptで制御します。

JavaScript

let el = document.getElementById("bgm");

function enableMute() {
  el.muted = true;
}

function disableMute() {
  el.muted = false;
}

$(function(){
  $('#Audio-Control button').click(function(){
    $('#Audio-Control button').toggleClass('active');
  });
});

getElementでドキュメント内の指定したidの要素を取得してきて、クリックされたボタンのonclickで呼び出された関数に対してmuted属性の値をtrueかfalseを切り替える。
これでON/OFFの制御ができます。
あとはデザイン上のクリックした要素をアクティブにしてボタンの色を変える処理も加えて完成。

実際に作ったのがこちら。
ONに切り替えるとBGMが流れます。
音が出ても良い場所で確認ください。