一つのボタンで再生/停止を切り替えたい。一ページで複数のaudioタグを設置し、別のボタンを押したら音が切り替わるようにしたい。

Question

前提・実現したいこと

参考URL
https://blog.maromaro.co.jp/archives/7231
こちらのように複数の再生できるボタンを設置しボタンを押したら切り替わるようにしたいのですが、一つのボタンで停止機能も付けたいと考えています。

機能としては、
一つのボタンを一回クリックで再生、二回クリックで停止
という機能と
ボタン1クリックで再生中、別ボタンをクリックするとこちらに切り替わり再生され且つボタン1の曲は止まる

下記は参考にしたスクリプトに機能を足す形で作っていたのですが、思う形になりませんでした。（再生中別ボタンを押すと単純に音が停止してしまい、次の曲が流れない）
こちらのコードをどう直せば目的の処理になりますか。
ご教授いただければと思います。
どうぞよろしくお願いいたします。

該当のソースコード

var isPlaying = false;
$('.audio_btn').on('click', function(){

$('audio').each(function() {
   $(this).get(0).pause();
 });
 var audiothis =  $(this).prev().get(0);
 if (isPlaying) {
    audiothis.pause();
    isPlaying = false;

    } else {
        audiothis.currentTime = 0;
        audiothis.play();
        isPlaying = true;

    }

 });

何卒どうぞよろしくお願いいたします。

Answer 1

isPlayingはグローバルなフラグですよね。
そしてどれかボタンが押されたとき、isPlayingがtrueならpauseだけ実行して処理が終わってますよね。
なので当然の動作をしているのかなと思います。
実現したい機能が実装されていないことになります。

Comments

[choco2021]

ありがとうございます。
質問があいまいになっておりましたので、文章を追記させていただきました。
目的の機能を追加するにはどのようにコードを直せばいいかお教えいただければ幸いです。
どうぞよろしくお願いいたします。

[itagagaki]

それではちょっと丸投げですね。。

> まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。
[推奨していない質問｜teratail（テラテイル）](https://teratail.com/help/avoid-asking)

[choco2021]

$('audio').each(function() {
$(this).get(0).pause();
});
ここの部分に更にフラグを振り分けるifを書けばいいのかと思い試してはいるのですが、
根本的にまだjs（jQuery）を理解しておらず、この辺りから考え方が分からなくなってしまっております。
$('audio').each(function() {
var audiothis2 = $(this).get(0).pause();//クリックしたものを保存
if(audiothis2) {//同じか違うか
isPlaying = true;//同じなら止める方へ
}else{
isPlaying = false;//違うなら音が鳴る方へ（ここで前の音を止めた後、該当ボタンの音もなって欲しいが書き方が分からない）
}
});

そもそもこの考え方で合っているのか等、困っております。
どうぞよろしくお願いいたします。