ボタン(画像)を押すと音が鳴り、再度押すと止まるサイトを作成中なのですが、再生とストップは出来たのですが、複数ボタンを設置すると、「ボタン1」を再生中に「ボタン2」を押すと1.mp3の音楽再生したまま、2.mp3が再生されてしまいます。
「ボタン2」のボタンをおしたら1.mp3は止まるようにしたいのですが、教えて頂けますでしょうか?
=====HTML=====
<audio id="overSound1" preload="auto"> <source src="1.mp3" type="audio/mp3"> ※お使いの環境では再生できません。 </audio> <span class="soundBtn2 clicked2">再生・停止</span> <audio id="overSound2" preload="auto"> <source src="2.mp3" type="audio/mp3"> ※お使いの環境では再生できません。 </audio> <span class="soundBtn3 clicked3">再生・停止</span> <audio id="overSound3" preload="auto"> <source src="3.mp3" type="audio/mp3"> ※お使いの環境では再生できません。 </audio>
=====javascript=====
$(".soundBtn1").click(function(){ if($(this).hasClass("clicked1")){ $(this).removeClass("clicked1"); document.getElementById("overSound1").currentTime = 0; document.getElementById("overSound1").play(); }else{ $(this).addClass("clicked1"); document.getElementById("overSound1").pause(); } }); }); $(function(){ $(".soundBtn2").click(function(){ if($(this).hasClass("clicked2")){ $(this).removeClass("clicked2"); document.getElementById("overSound2").currentTime = 0; document.getElementById("overSound2").play(); }else{ $(this).addClass("clicked2"); document.getElementById("overSound2").pause(); } }); }); $(function(){ $(".soundBtn3").click(function(){ if($(this).hasClass("clicked3")){ $(this).removeClass("clicked3"); document.getElementById("overSound3").currentTime = 0; document.getElementById("overSound3").play(); }else{ $(this).addClass("clicked3"); document.getElementById("overSound3").pause(); } }); });
回答1件
あなたの回答
tips
プレビュー