Поиск через потоковый файл MP3 с тегом HTML5 <audio>

Надеюсь, кто-то может помочь мне в этом.

Я играю с сервером node.js, который передает аудио клиенту, и я хочу создать плеер HTML5. Прямо сейчас, я передаю код из node с использованием кодированной кодировки, и если вы перейдете непосредственно к URL-адресу, он отлично работает.

Что бы я хотел сделать, это вставить это с помощью тега HTML5 <audio>, например:

<audio src="http://server/stream?file=123">

где /stream - конечная точка для сервера node для потока MP3. Игрок HTML5 загружается в Safari и Chrome, но он не позволяет мне искать, и Safari даже говорит, что это "Live Broadcast". В заголовках /stream я включаю размер файла и тип файла, и ответ заканчивается должным образом.

Любые мысли о том, как я мог обойти это? Я, конечно, мог бы просто отправить весь файл сразу, но тогда игрок будет ждать, пока все это будет загружено - я бы скорее потопил его.

Ответ 1

Убедитесь, что сервер принимает запросы диапазона, вы можете проверить, находится ли Accept-Ranges в заголовке. В jPlayer это распространенная проблема в браузерах Webkit (особенно Chrome), когда дело доходит до прогресса и поиска функциональности.

Возможно, вы не используете jPlayer, но информация о реакции сервера на официальном сайте может быть полезна.

http://www.jplayer.org/latest/developer-guide/#jPlayer-server-response

Ответ 2

смотрите здесь http://www.scottandrew.com/pub/html5audioplayer/, я использовал это, и он воспроизводится во время загрузки файла. Он немного ждет буфер, но затем играет. Никогда не пробовал искать, но я бы начал с попытки установить "aud.currentTime" в своем коде, если это можно сделать.

Удачи.

Ответ 3

Вы отправляете Accept-Ranges (RFC 2616, раздел 14.5) Заголовок ответа?

Ответ 4

Из того, что я понимаю, вы хотите, чтобы игрок разрешил пользователю переходить на части аудио/видео, которые еще не буферизовались, что-то вроде того, что делают игроки Vimeo/YouTube.. Tbh Я не уверен, что это возможно, поскольку я рассмотрел некоторые из примеров медиальных элементов html5, и они просто не позволили мне искать небуферизованные части: (

Если вы хотите искать через буферную часть - тогда это не проблема. На самом деле, вы сами создаете проблему для себя, насколько я понимаю. Вы хотите передать файл, и то, что это делает, заставляет игрока думать, что у вас есть какой-то живой эфир. Если вы просто отправили файл напрямую - у вас не было бы этой проблемы, потому что игрок сможет начать играть до того, как он загрузит весь файл. Это прекрасно работает с аудио и видео элементами, и я подтвердил это поведение как в Chrome, так и в FF:)

Надеюсь, это поможет!

Ответ 5

возможно, этот html5 audio player example объяснит и продемонстрирует нам новый элемент и его .load,.play,.currentTime и т.д. методы.

Я использую массив элементов и, конечно, могу установить текущую позицию. мы можем использовать также обработчики событий (например, "загруженные данные" ), чтобы подождать, прежде чем разрешить поиск.

ping и получайте удовольствие от html5:)

Ответ 6

но у меня была та же проблема. Необходимо установить некоторые заголовки для ответа медиафайлов.

в качестве примера:

Accept-Ranges:bytes
Content-Length:7437847
Content-Range:bytes 0-7437846/7437847

Затем звуковой тег сможет искать