HTML5 тега audio, как определить что звук воспроизводится?

Samail
На сайте с 10.05.2007
Offline
369
731

Нужно вместо плеера браузера сделать свой, по большому счёту мне нужны только 2 кнопки плай и пауза (у меня радио). Как сделать эти кнопки я знаю. Но непонятно как сделать что-бы они менялись в зависимости от того играет музыка или нет. Просто при нажатии на одну кнопку скрывать её и показывать другую не пойдёт, потому что воспроизведение может остановиться не потому что его пользователь остановил, а потому что например поток стал недоступен ...или воспроизведение и не началось потому что он и был недоступен. Как это отследить?

lutskboy
На сайте с 22.11.2013
Offline
190
#1

а почему не использовать тот же soundmanager2 или jplayer

Samail
На сайте с 10.05.2007
Offline
369
#2

Скрипты у них не маленькие, пользователь может и не будет радио включать, а загрузить скрипт придётся. Дизайн своих кнопок я могу сделать абсолютно любым и скрипт будет пара строк всего.

lutskboy
На сайте с 22.11.2013
Offline
190
#3
Samail
На сайте с 10.05.2007
Offline
369
#4

По ссылке увидел переменную "currentTime", решил применить её для своей задачи, т.е. плай меняется на паузу если currentTime > 0.

Радио можно включить кнопкой


<a href="javascript:void(0)" title="Включить радио" onClick="document.getElementById('apl').play();"><i class="fa fa-play-circle-o" aria-hidden="true"></i></a>

А можно выбрав радиостанцию из списка


$('.radio').change(function(){
$("#pla").html('<audio controls src="'+this.value+'" id="apl">');
apl.play();
});

Так-же добавил время воспроизведения:


$('#apl').on('timeupdate', function() {
var s = parseInt(apl.currentTime % 60);
s = s >= 10 ? s : '0' + s;
var m = parseInt((apl.currentTime / 60) % 60);
$("#time").html(m + ':' + s);
});

Если включить кнопкой ту станцию ссылка на поток которой была указана в <audio> сразу при загрузке страницы, то время показывается. А если выбрать другую станцию, то не показывает. И даже если убрать apl.play();, сменить станцию и включить её кнопкой, то то-же не появляется время.

dma84
На сайте с 21.04.2009
Offline
168
#5

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий