Можно ли транслировать из источника .m3u при наведении на div?

Я работаю над интерактивным сайтом о языках мира. Частью плана является создание карты мира, которая реагирует звуком при наведении курсора на разные страны. Акцент делается на звуке языка.

Я хотел бы встроить потоки веб-радио из каждой страны. Как только вы наводите курсор на страну, трансляция воспроизводится. Он останавливается, когда курсор покидает контур страны.

По коду можно было бы прослушивать события мыши, например. с jQuery и назначьте потоки функциям.

Мне удалось встроить mp3-файлы, которые лежали в отдельной директории на моем сервере. Как это сделать с m3u? Насколько я знаю, html5 не может обрабатывать потоки m3u.

Я благодарен за любую помощь.


javascript stream html internet-radio m3u
person ifthisthenthat    schedule 13.09.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

M3U — это не поток, это плейлист. Если вы откроете файл M3U в текстовом редакторе, вы увидите, что это просто список URL-адресов.

#EXTM3U
http://example.com/stream
http://example.com/stream2

Для ваших целей удалите любую строку, начинающуюся со знака решетки #, а затем используйте URL-адреса в файле в качестве источника для вашего аудио HTML5.

Также обратите внимание, что существует другой стандарт, использующий M3U8 (то же самое, только в кодировке UTF-8) HTTP Live Streaming (HLS ), но в настоящее время не поддерживается широкой поддержкой браузеров. На данный момент, если вы наткнулись на файл M3U, можно с уверенностью сказать, что вы смотрите на прогрессивный поток HTTP, обычно обслуживаемый SHOUTcast или Icecast. Хотя, скорее всего, это изменится в будущем.

person Brad    schedule 13.09.2014
comment
Я сделал именно то, что вы сказали, и действительно, тег ‹audio› тянет поток mp3 с сервера веб-радио. Теперь у меня следующая проблема. Поскольку это поток, у него нет конца. Есть ли возможность остановить поток, когда мышь покидает область? - person ifthisthenthat; 13.09.2014
comment
@YuliyanIlev Да, просто удалите элемент <audio>. Если вы только остановите элемент и оставите его на странице, он продолжит загрузку, расходуя память. - person Brad; 13.09.2014
comment
Я использовал функцию .remove jQuery. Сейчас происходят странные вещи. Первый раз работает. Поток останавливается, когда курсор покидает область. Второй раз продолжает играть. Играют два или более экземпляра. Не останавливается даже при перезагрузке страницы. - person ifthisthenthat; 13.09.2014
comment
Я бы остановил его, прежде чем удалить его. Это должно работать и без этого... похоже, у вас что-то еще происходит. Если вы можете сузить свой код до воспроизводимого примера, я рекомендую опубликовать новый вопрос для этого, а затем оставить ссылку здесь, и я проверю его. - person Brad; 13.09.2014
comment
Спасибо за ваши быстрые ответы. Это мне очень помогло! Я нашел ответ на проблему здесь: ссылка Интересно, что в списке ресурсов нет потока . Означает ли это, что буферизация происходит только при потоковой передаче звука? Может ли это работать, скажем, со 150 радиопотоками на одной странице? - person ifthisthenthat; 13.09.2014
comment
Вы не должны создавать звуковые элементы, пока не будете готовы воспроизвести поток. В противном случае вы действительно попытаетесь подключиться ко всем станциям одновременно. - person Brad; 13.09.2014
comment
В этом случае я должен видеть контейнеры данных с потоками при загрузке страницы, верно? Список ресурсов выглядит следующим образом при запуске: СКРИНШОТ. Через несколько секунд файлы появятся. У них есть названия ip-адресов и нет окончаний. Кроме того, они, кажется, не имеют размера и очень короткого времени загрузки. Посмотрите: СКРИНШОТ. Кстати, я работаю над Safari. - person ifthisthenthat; 13.09.2014
comment
То же самое: они кажутся безразмерными и их загрузка составляет несколько битов секунды. СКРИНШОТ. Самое тяжелое здесь — моя SVG-карта. Потоки, кажется, не буферизуются в фоновом режиме. - person ifthisthenthat; 13.09.2014
comment
Если это так, то вы, вероятно, в хорошей форме. Тем не менее, проверьте в других браузерах, так как каждый браузер имеет различную реализацию. - person Brad; 13.09.2014
comment
Потоковая передача при наведении работает в Safari и Chrome, но не в Firefox. Также Chrome ужасно отображает мой SVG. Близкие формы с краевыми контурами и пробелами между ними вызывают уродливую визуализацию. Я опубликую новый вопрос об этом завтра. - person ifthisthenthat; 14.09.2014