🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1194閲覧

音の再生を重複させたくない

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/10/23 02:10

編集2019/10/23 02:47

ボタン(画像)を押すと音が鳴り、再度押すと止まるサイトを作成中なのですが、再生とストップは出来たのですが、複数ボタンを設置すると、「ボタン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(); } }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/10/23 02:20

コードはマークダウンのcode機能を利用してご提示ください
m.ts10806

2019/10/23 02:22

「止まる」ができてるのでしたら止まる処理を各再生処理の冒頭に書いたら良いかと思いますが、そういうことではないのですか?
退会済みユーザー

退会済みユーザー

2019/10/23 02:49

教えて頂きありがとうございます。 コードの中に書き込み編集しました。
退会済みユーザー

退会済みユーザー

2019/10/24 03:23

m.ts10806さん ありがとうございました。 初めに全て止めるの処理で実装できました。
guest

回答1

0

ベストアンサー

.pause(); で初めに全て止めるで実装

投稿2019/10/24 03:25

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/10/24 04:04

手続き通り進めれば良いというわけでもなく、中には工夫する必要があると思います。 「あるところだけ黄とし、あとは緑とする」とした場合、ひとつずつ黄/緑を指定するのではなく、「全て緑にしたあと特定の箇所だけ黄にする」方がコードが簡潔になります。 今回はその考え方ですね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問