１つだけ起動するオーディオの再生・停止ボタンの実装方法

Question

実現したいこと

オーディオの再生ボタンが10個あり、各ボタンはクリックで再生・停止できるトグルボタンになっています。
いずれかのオーディオの再生中に他の再生ボタンをクリックすると、再生中の楽曲が停止し、クリックしたボタンの音源が再生されます。

その際、先に再生していたオーディオのボタンは再生前の状態（PLAY▶）に戻り、新たにクリックしたボタンが再生中の外観（PAUSE）に変わります。
外観の変化はCSSのis_activeクラスの付け替えで行っています。

発生している問題・分からないこと

あるオーディオの再生中に、他の音源の再生ボタンを押した時の挙動が上手くいきません。
オーディオの切り替えはできていますが、CSSのクラスの付け替えが上手くできていない状態です。

恐れ入りますが、分かる方がいましたら知恵をお借りできますと幸いです。
よろしくお願いいたします。

該当のソースコード

//視聴ボタンのオーディオ再生
document.addEventListener('DOMContentLoaded', () => {

    const audioPlayers = document.querySelectorAll('.player');

    audioPlayers.forEach((audioPlayer) => {
        // .audio-player を基点として audio 要素を取得
        const audio = audioPlayer.querySelector('audio');
        // ボリュームを調整（必要に応じて。初期値は 1.0）
        audio.volume = .1;
        // .audio-player を基点としてボタンと表示テキストを取得
        const toggleBtn = audioPlayer.querySelector('.btn_play');
        const BtnText = audioPlayer.querySelector('.btntext');

        // .audio-player を基点としてSVG要素を取得
        const playIcon = audioPlayer.querySelector('.play');
        const stopIcon = audioPlayer.querySelector('.stop');

        // ボタンのクリックイベントのリスナー
        toggleBtn.addEventListener('click', togglePlayPause, false);
        // audio 要素の再生終了時に発行される ended イベントのリスナー
        audio.addEventListener('ended', audioEnded, false);


        // ドキュメントの play イベント
        document.addEventListener('play', (e) => {
            // 全ての audio 要素を取得
            const audios = document.querySelectorAll('audio');
            // それぞれの audio 要素で以下を実行
            audios.forEach((audio) => {
                // play イベントが発生した要素が自身でなければ停止
                if(audio !== e.target) {
                    audio.pause();
                    audio.currentTime = 0; //先頭に戻す場合（もし必要であれば）
                }
            });
        }, true); // addEventListener()の第3引数（useCapture）を true に


        // トグルボタンのリスナー
        function togglePlayPause() {
            // 一時停止中かどうかで処理を分岐
            if (audio.paused) {
                // 一時停止中の場合は再生
                audio.play();
                toggleBtn.classList.add("playing");

                playIcon.classList.remove("is_active");
                stopIcon.classList.add("is_active");

                BtnText.textContent = 'STOP';
            } else {
                // 一時停止中でない（再生中）の場合は一時停止
                audio.pause();
                audio.currentTime = 0;
                toggleBtn.classList.remove("playing");

                stopIcon.classList.remove("is_active");
                playIcon.classList.add("is_active");

                BtnText.textContent = 'PLAY';
            }
        }

        // 再生終了時にはトグルボタンのラベルを Play に変更
        function audioEnded() {
        BtnText.textContent = 'PLAY';
        toggleBtn.classList.remove("playing");
        stopIcon.classList.remove("is_active");
        playIcon.classList.add("is_active");
        }

    });
}, false);

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

playイベントと同じように、トグルイベントにも if(audio !== e.target) のような分岐を設けるべきという考えには至っていますが、具体的な記述方法にたどり着けていない状況です。

補足

特になし

Answer 1

ended イベントだけでなくpauseイベントのリスナーを追加する事で解決できました。

// 再生中に他のボタンを押した時に発生する pause イベントのリスナー
audio.addEventListener('pause', audioEnded, false);

を追記しました。