А можно такую штуку подсказать я просто в js не очень разбираюсь.
Вот есть теперь два плеера и два скрипта, один ваш, который меняет стиль, а другой который останавливает проигрывание одного плеера, если запустили второй. Есть такая проблема: Если запустить первый плеер, то у него меняется иконка на Pause, и если в это время запустить второй плеер, то первый плеер останавливается, но иконка Pause остается у него.
Я бы хотел чтобы было так: Есть два плеера запустили один у него иконка с Play поменялась на Pause, в этом время запустили второй плеер, и тут у первого плеера иконка опять стала Play, а у второго иконка стала Pause.
<audio onplay="other_pause(0)" src="dialog1.mp3" /></audio>
<div class="labelAud">
<img src="play.png" width="60px" alt="play" class="play">
<img src="pause.png" width="60px" alt="pause" class="pause">
</div>
<audio onplay="other_pause(1)" src="dialog2.mp3" /></audio>
<div class="labelAud">
<img src="play.png" width="60px" alt="play" class="play">
<img src="pause.png" width="60px" alt="pause" class="pause">
</div>
<script>
var aud = document.querySelectorAll('audio'),
labelAud = document.querySelectorAll('.labelAud');
labelAud.forEach((el, i) => {
el.onclick = e => {
if (e.target.matches('.play')) {
aud[i].play();
e.target.style.display = 'none';
e.currentTarget.querySelector('.pause').style.display = 'inline';
}
else if (e.target.matches('.pause')) {
aud[i].pause();
e.target.style.display = 'none';
e.currentTarget.querySelector('.play').style.display = 'inline';
}
}
aud[i].onended = e => {
el.querySelector('.play').style.display = 'inline';
el.querySelector('.pause').style.display = 'none';
};
});
</script>
<script>
var a=document.getElementsByTagName("audio");
function other_pause(b){
for(i=0;i<a.length;i++){
if(!(i==b)){
a[i].pause();
};
}
}
</script>
