Инструменты пользователя

Инструменты сайта


tag_audio_html5

Управление тегом audio в HTML5

Узнать проигрывается ли сейчас что-то в плеере

Проверить у встроенного плеера браузера, проигрывается ли что-то в данный момент.

<audio id="player" src="test.mp3" controls autobuffer> </audio>

<script>
player = document.getElementById('player');
if (player.paused)
  console.log('стоит на паузе');
else
  console.log('играет что-то');
</script>

Если прерывается трансляция, возобновляем проигрывание

Собственно, когда нажимаем play, запускается по таймауту функция которая определяет, остановилось ли воспроизведение, и если оно остановилось, то просто его запускает вновь. Также навешено событие на нажатие на паузу - отключение таймера, чтобы не возобновлялось воспроизведение, когда пользователь решил остановить.

<audio id="player" src="http://193.107.239.146:8000/radio" controls autobuffer> </audio>

<script>
var numt = 0;

function play_always() {
	player = document.getElementById('player');

	if (player.paused)
		player = document.getElementById('player').play();
	
	numt = setTimeout('play_always()', 1000);
}

player = document.getElementById('player');
player.onpause = function(event) { clearTimeout(numt); }
player.onplay = function(event) { play_always(); }

</script>

Отложенная загрузка данных

Чтобы плеер не загружал файл или поток при открытии страницы, можно поступить так:

<audio id="player" controls autobuffer> </audio>

<script>
var numt = 0;
var first = true;

function play_always() {
	player = document.getElementById('player');

	if (player.paused)
		player = document.getElementById('player').play();
	
	numt = setTimeout('play_always()', 1000);
}

player = document.getElementById('player');
player.onpause = function(event) { 
	clearTimeout(numt);
}

player.onplay = function(event) {
	if (first) {
		player = document.getElementById('player');
		player.src = "http://193.107.239.146:8000/radio";
		first = false;
	}
	play_always(); 
}

</script>

То есть с помощью

player.src = "http://193.107.239.146:8000/radio";

мы даем данные тогда когда нам это нужно. Иначе плеер качает сразу при открытии.

Да, кстати first в данном случае играет заглушку, которая дает загрузку данных только один раз.

Живой пример

Все эти хитрости нам помогли при создании интернет-радио.

Обсуждение

Ваш комментарий. Вики-синтаксис разрешён:
   ___    __ __  __  __   ___   ____ 
  / _ \  / //_/ / / / /  / _ | / __ \
 / , _/ / ,<   / /_/ /  / __ |/ /_/ /
/_/|_| /_/|_|  \____/  /_/ |_|\____/
 
tag_audio_html5.txt · Последние изменения: 2014/04/10 20:31 — admin