[kolhoz]

А можно такую штуку подсказать я просто в 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>