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が流れます。
音が出ても良い場所で確認ください。



こんな感じですかね。
他にもやり方はあると思いますが、こちらの方法でも大丈夫です。

また、ページ遷移してもON/OFFの再生、停止を引き継ぐには、Cookieなんかの情報を保存する仕組みを使えばいいですね。
CookieよりもHTML5から追加されたWeb Storageの方が使いやすいです。

Web Storageについては、以下の記事でご紹介しています。

↓　↓　↓

Cookieよりも扱いやすい。HTML5で追加されたWeb Storage

ONかOFFかのフラグを立てて制御すればいけますね。