Javascript-форум - Стилизация плеера HTML5

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Стилизация плеера HTML5 (https://javascript.ru/forum/jquery/76254-stilizaciya-pleera-html5.html)

Стилизация плеера HTML5

Здравствуйте. Есть плеер на HTML5

<audio controls>
  <source src="dialog1.mp3" />
</audio>

Как стилизовать плеер так, чтобы вместо панели управления (полосы прокрутки, громкости, play и pause) были только кнопка play и pause в виде картинок?

На одной странице будет несколько плееров и если возможно нужно чтобы при проигрывании одного аудио, второе автоматически останавливалось

С проигрыванием по очереди разобрался. Нужно стилизацию сделать

<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();
			else if (e.target.matches('.pause')) aud[i].pause();
		});

	</script>

почему-то данный код по два раза отобразил обе кнопки. И еще я видимо не так уточнил. Я имел ввиду, чтобы была видна кнопка Play, если ее нажали, то вместо нее видно кнопка Pause и наоборот. Чтобы только одна кнопка была все время на странице

Цитата:

Сообщение от kolhoz

почему-то данный код по два раза отобразил обе кнопки.

тут два аудио, это я для вашего понимания

я понял, как как сделать так, чтобы не сразу обе кнопки play и pause были, а только одна из них и чтобы менялись они?

<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>

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

kolhoz,
переписал по нормальному.

<audio src="https://nvdx.ru/vega.mp3" /></audio>

<audio src="https://nvdx.ru/vega.mp3" /></audio>

<script>

	var img = {
		play: 'play.jpg', //путь к изображению
		pause: 'pause.jpg' //путь к изображению
	};
	var aud = document.querySelectorAll('audio');
	aud.forEach(el => el.insertAdjacentHTML('afterend', '<img alt="play" class="labelAud" src="' + img.play + '">'));
  new Image().src = img.pause;
	var labelAud = document.querySelectorAll('.labelAud'),
		play = function (i) {
			aud[i].play();
			labelAud[i].src = img.pause;
			labelAud[i].alt = 'pause';
		},
		pause = function (i) {
			aud[i].pause();
			labelAud[i].src = img.play;
			labelAud[i].alt = 'play';
		}, ind = null;

	[].forEach.call(labelAud, function (el, i) {
		el.onclick = function () {
			if (ind != null && ind != i && !aud[ind].paused) pause(ind);
			aud[i].paused ? play(i):pause(i);
			ind = i;
		};
		aud[i].onended = function () {
			pause(i);
			ind = null;
		};
	});

	</script>

То что нужно, спасибо.