HTML5の<audio>複数、同時再生をできないようにしたい。

Question

HTML5の<audio>タグで複数のプレーヤーを配置したサイトを作ろうと思ってテストしています

複数のプレーヤーをそれぞれ再生することができてしまい、音が被ってしいます。

再生⇒停止（終了）しないと別なプレーヤーが再生できないようにする手段はないものでしょうか？

宜しくお願いいたします。

html5
<div class="sound"><audio src="sound_01.mp3" controls></audio></div><div class="soundtext">サウンド1</div>
<div class="sound"><audio src="sound_02.mp3" controls></audio></div><div class="soundtext">サウンド2</div>
<div class="sound"><audio src="sound_03.mp3" controls></audio></div><div class="soundtext">サウンド3</div>

Comments

[x_x]

現状はどのように再生するようにしているのでしょうか？

[efu_akio]

単純に羅列しているだけなので、制御できるはずないですよね･･･

Answer 1

<script>
var audios = document.querySelectorAll( "audio" );
for(var i=0;i<audios.length;i++){
audios[ i ].addEventListener( "play", function(){
for(var j=0;j<audios.length;j++){
if( audios[ j ]!=this ){ audios[ j ].pause() }
}
}, false );
}
</script>

このコードを追加したら制御できました。ありがとうございました。

Answer 2

過去に私も同様の質問をteratail内で質問した事があります。
同じコードで対応できるかは不明ですが・・・

https://teratail.com/questions/146393

Answer 3

JavaScriptで各audioの再生停止を制御すればできるかと思います。

Comments

[efu_akio]

ありがとうございます。JavaScriptで制御するのですか、JavaScript調べてみます。ありがとうございます。