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

Question

[Сергей Горячев]

Использую на сайте <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 менялись динамически.
То есть по сути, кнопка одна, а вот действие меняется и сама кнопка тоже.
Зашли на сайт, музыка не играет. Нажали кнопку, заиграла. А кнопка перешла в режим плей.
Нажили еще раз кнопку, мелодия встала на паузу. Кнопка перешла в режим паузы.

Answer 1

[holfza]

<button>Воспроизведение</button>

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

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

Ну и в обработчике клика проверяете, если стоит на паузе - то по клику воспроизводить, если играет - то ставить на паузу. Типа:

if($('#player').paused) {
	$('#player').play();
} else {
	$('#player').pause();
}

Comments

[Сергей Горячев]

Не знаю почему, но сработало только с get(0) - $('#player').get(0).play();