Как я могу воспроизвести поток shoutcast / icecast с помощью HTML5?

Можно ли воспроизвести поток shoutcast / icecast с помощью HTML5?

Если да, то как мне это реализовать?


html streaming audio-streaming icecast shoutcast
person Cy.    schedule 30.04.2010    source источник

Ответы (7)


arrow_upward
49
arrow_downward

Обновление 2020

Современные браузеры не нуждаются в специальной обработке или обходных решениях на стороне сервера для воспроизведения звука. Просто используйте аудиотег с прямой ссылкой на один или несколько источников потока (не список воспроизведения):

<audio>
    <source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>

Из MDN:

Элемент HTML <audio> используется для встраивания звукового содержимого в документы. Он может содержать один или несколько источников звука, представленных с помощью атрибута src или элемента <source>: браузер выберет наиболее подходящий из них.

Браузеры поддерживают flac, mp3, vorbis, aac, opus и wav. Подробнее на caniuse.com.

Исходный пост

Добавьте точку с запятой в конец http-запроса. Это протокол, установленный shoutcast, чтобы переопределить его обнаружение браузером. Нравится:

<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
person Nate Sweet    schedule 06.07.2010
comment
Похоже, что в настоящее время (2020 г.) элемент audio может обрабатывать потоки mp3 без каких-либо настроек. - person Andreas; 30.03.2020
comment
Большое спасибо за ваш ответ @Nate Sweet - person zahra_oveyedzade; 19.02.2021

arrow_upward
18
arrow_downward

Существует большая проблема с SHOUTcast, из-за которой, как я подозреваю, он не работает даже в Chrome, который должен поддерживать MP3.

SHOUTcast может обслуживать три разных типа ответа:

  • ответ на потоковое аудио по собственному протоколу SHOUTcast «ICY». Он решает сделать это, если игрок, обращающийся к потоку, включает заголовок icy-metadata: 1.

  • Ответ на потоковое аудио по протоколу HTTP без дополнительных метаданных для медиаплееров без поддержки ICY.

  • «SHOUTcast D.N.A.S. Статус »и другие страницы в веб-интерфейсе.

Как он решает, использовать ли веб-страницу вместо аудиопотока? Он угадывает, используете ли вы веб-браузер. Посмотрев, начинается ли заголовок User-Agent с Mozilla/.... Потому что все веб-браузеры - это Mozilla, верно? Боже, SHOUTcast.

Поэтому, когда Chrome пытается получить аудиопоток для воспроизведения, SHOUTcast думает, что это веб-браузер (ну ... это так), и отказывается предоставить ему аудиопоток для вставки в аудиотег. Вместо этого он получает веб-страницу администратора.

(Я предполагаю, что Safari передает заголовок icy-metadata, чтобы избежать проблемы, имея конкретную поддержку SHOUTcast. Я не могу протестировать его в данный момент, так как Safari не воспроизводит аудио или видео. Возможно, он хочет, чтобы я установил QuickTime для этого. Может быть, его можно будет набить.)

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

person bobince    schedule 30.04.2010
comment
Большое спасибо, что не только сказали, что он не работает, но и объяснили, почему! - person leemes; 30.10.2011

arrow_upward
4
arrow_downward 

<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>

Это должно работать нормально, но убедитесь, что /; стоит после URL-адреса потока и порта. Если вам не нужно автовоспроизведение, удалите тег "autoplay".

person Ruwan Harshana Peiris    schedule 19.05.2013
comment
Я немного отредактировал ваше сообщение, пожалуйста, попробуйте использовать правильную грамматику при публикации в Stack Overflow. В остальном, хорошая работа! - person Nathan2055; 19.05.2013

arrow_upward
3
arrow_downward

да. Но это работает только в Safari

    <!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>

Причина, по которой Opera и Firefox не поддерживали платные кодеки

person classless    schedule 30.04.2010

arrow_upward
3
arrow_downward

см. здесь: Можно ли воспроизводить трансляцию в Интернете радиопотоки с html5?

person Werewolve    schedule 30.04.2010

arrow_upward
0
arrow_downward

При проблемах перенаправления с тегом <audio> в браузерах попробуйте добавить «/ stream» в конце URL-адреса потока для предотвращения перенаправления.

пример:

не работает: http://live-radio01.xxxxxx.com/2TJW/mp3

работает: http://live-radio01.xxxxxx.com/2TJW/mp3/stream < / а>

person DanielBLN    schedule 13.05.2017

arrow_upward
0
arrow_downward

Я использую Icecast с Easystream для потоковой передачи как на Mac, так и на ПК. Сценарий Устанавливает аудиоплеер под названием MP3 Sticky Player. swf В обоих случаях с файлами поддержки документации проигрыватель просто загружается, как показано ниже.

PC

<ul id="playlist" style="display:none;">
        <li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
    </li>
</ul>

MAC

<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
            Your browser does not support the <code>audio</code> element.
</audio>

Поскольку мы удалили изображения из любых метаданных mp3, мы используем загрузчик изображений, который захватывает Icy-MetaData (к вашему сведению, для правильной работы вам понадобится как минимум PHP 5.4) и сопоставляет каталог обложек для каждой песни игрока, которая транслируется.

person Community    schedule 25.10.2018