[jQuery]audio要素とjQueryと画像を使ってオーディオの再生・停止

2016/05/21

最近の案件で、サイト上で音楽を流したいという要望がありましたので、jQueryを使って自分なりに調べて作ってみました。

本当はmp3以外にもoggやwavファイルもある方が良いようですが、最新のブラウザだとどのブラウザでも大丈夫そうだったので、mp3だけにしてます^^;

サンプル

※画像をクリックすると音がなります。

再生・停止

設置方法

最初にボタンになるタグに「clicked」とクラス名をつけています。ボタンをクリックすると「clicked」のクラス名があれば、削除して、play()メソッドで音楽が再生され、「clicked」のクラス名がなければ、「clicked」のクラス名を付けて、pause()メソッドで停止するようにしています。
同時にcssで「soundBtn」のbackgroundに画像を指定して、「clicked」があるときはbackgroundの画像指定を上書きする形にしています。

<p class="soundBtn clicked">再生・停止</p>
<audio id="overSound" preload="auto">
  <source src="sound.mp3" type="audio/mp3">
  ※お使いの環境では再生できません。
</audio>

$(function(){
  $(".soundBtn").click(function(){
    if($(this).hasClass("clicked")){
      $(this).removeClass("clicked");
      document.getElementById("overSound").currentTime = 0; //再生秒数を 0 にセット
      document.getElementById("overSound").play();
    }else{
      $(this).addClass("clicked");
      document.getElementById("overSound").pause();
    }
  });
});

p.soundBtn {
	width: 75px;
	height: 24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	background: url(../img/top/sound.jpg) top left no-repeat;
}
p.clicked {
	background: url(../img/top/sound.jpg) bottom left no-repeat;
}

ページが表示された時に音楽を自動で再生させたい場合は下記の用に一行追加して、
HTMLのclickedクラスを消すことで可能かと思います。

$(function(){
  document.getElementById("overSound").play();
  $(".soundBtn").click(function(){
    if($(this).hasClass("clicked")){ // クリックされた要素がclickedクラスだったら
      $(this).removeClass("clicked");
      document.getElementById("overSound").currentTime = 0; //再生秒数を 0 にセット
      document.getElementById("overSound").play();
    }else{
      $(this).addClass("clicked");
      document.getElementById("overSound").pause();
    }
  });
});

もっと綺麗な書き方があるかと思いますがとりあえず動いたのでOKかなと。^^;