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

jquery

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

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

■サンプル

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

再生・停止

■必要ファイル

■設置方法

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

html

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

JS

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> 
<script>
$(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();
    }
  });
});
</script>

css

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クラスを消すことで可能かと思います。

JS

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> 
<script>
$(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();
    }
  });
});
</script>

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

LATEST ENTRY - 新着記事 -

CATEGORY - カテゴリ一覧 -