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
Обсуждение