[j0hnik]

<style>
		.pause {
			display: none;
		}
	</style>


	<audio src="https://nvdx.ru/vega.mp3" /></audio>
	<div class="labelAud">
		<img alt="play" class="play">
		<img alt="pause" class="pause">
	</div>

	<audio src="https://nvdx.ru/vega.mp3" /></audio>
	<div class="labelAud">
		<img alt="play" class="play">
		<img 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>