webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...

Как сделать кнопку Play/Pause на одном месте?

Использую на сайте <audio></audio>
По умолчанию не проигрывается, включается кнопкой.

<audio id="player" src="sound.mp3"></audio>
<div>
	<button onclick="document.getElementById('player').play()">Воспроизведение</button>
	<button onclick="document.getElementById('player').pause()">Пауза</button>
</div>

Вопрос в том, как сделать, чтобы кнопки Play и Pause менялись динамически.
То есть по сути, кнопка одна, а вот действие меняется и сама кнопка тоже.
Зашли на сайт, музыка не играет. Нажали кнопку, заиграла. А кнопка перешла в режим плей.
Нажили еще раз кнопку, мелодия встала на паузу. Кнопка перешла в режим паузы.
  • Вопрос задан
  • 2854 просмотра
Решения вопроса 1
@holfza
<button>Воспроизведение</button>

$('#player').on('play', function() {
	//Меняем текст кнопки на "Пауза"
});

$('#player').on('pause', function() {
	//Меняем текст кнопки на "Воспроизвести"
});

Ну и в обработчике клика проверяете, если стоит на паузе - то по клику воспроизводить, если играет - то ставить на паузу. Типа:
if($('#player').paused) {
	$('#player').play();
} else {
	$('#player').pause();
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект