#html #audio #html5-audio
#HTML #Аудио #html5-аудио
Вопрос:
Я тестирую HTML-тег audio.
И это работает в моей среде тестирования, но по какой-то причине не в моей рабочей среде.
Я просто использую: <audio src="/sandbox/test.mp3" controls="controls"></audio> .
Сайт тестирования находится на Windows, а производственный сайт — на Linux, но, я думаю, это должно иметь какое-то значение.
Я могу загрузить дорожку, поэтому я знаю, что она находится в нужном месте.
Рабочий URL-адрес:http://pieterhordijk.com/sandbox
Как указано, точно такой же код работает на testsite.
У кого-нибудь есть идеи относительно того, почему он не загружает мой звук?
PS
Я тестирую, используя:
Chrome 11.0.696.68
Редактировать
Теперь я нахожусь в Chrome 13 (сборка Canary), и загружается MP3.
Но WAV загружается только в первые секунды.
Комментарии:
1. С другой стороны, вы должны убедиться, что ваши аудиофайлы vorbis имеют расширение .oga и подаются как audio / ogg.
2. @Shadow: хммм. хорошо. Не знал этого. Могу ли я просто переименовать файл или это совершенно другой формат?
3. Вы просто переименовываете файл. Однако я заметил другую проблему с вашими файлами ogg. Они не содержат звуковую дорожку vorbis и вместо этого содержат flac. Ваши файлы wav должны быть закодированы в файлы oga с rarewares.org/ogg-oggenc.php
4. @Shadow. спасибо за твою помощь, приятель. Я конвертировал его онлайн @ oggconvert.com . Я скачаю кодировщик и сделаю это сам, если вы скажете, что это неправильный формат.
Ответ №1:
http://pieterhordijk.com/sandbox/test.mp3 подается как audio / mpeg, что хорошо. Однако, когда я загружаю его с Opera, он по какой-то причине оказывается поврежденным, и я не могу добавить его в плейлист Foobar или что-либо еще. Но он нормально загружается с wget, так что это может быть просто проблема с Opera или что-то необычное, что сервер предоставляет Opera. Загрузка mp3 с помощью <audio>, конечно, в любом случае не работает в Opera, поскольку Opera не поддерживает этот формат.
http://pieterhordijk.com/sandbox/test.ogg подается как audio / ogg, что хорошо. И теперь он также содержит vorbis вместо flac (поскольку вы это исправили). Оно не будет воспроизводиться в Opera удаленно, но воспроизводится нормально, если я загружаю файл и открываю его в Opera локально. Он также отлично воспроизводится в Foobar.
http://pieterhordijk.com/sandbox/test.oga подается с неправильным типом mime. Оно подается как текстовое / обычное, но должно подаваться как audio / ogg (вы можете исправить это в .htaccess). Но он содержит vorbis и воспроизводится с помощью Foobar. Опять же, это не будет воспроизводиться удаленно в Opera. Но, если я скачаю его и открою локально в Opera, он воспроизводится без проблем.
http://pieterhordijk.com/sandbox/test .wav подается как audio / x-wav, что хорошо. Но файл wav неприемлем для потоковой передачи, поскольку его размер составляет 30,9 МБ, и воспроизведение может быть ужасным, если он не был полностью извлечен. По крайней мере, этот файл воспроизводится в Opera удаленно.
Однако на моем сайте все работает нормально. Смотрите http://shadow2531.com/opera/testcases/plugins/temp/peehaa/test_audio_vorbis.html. Ваш oga-файл воспроизводится в Opera без проблем, и он должен вернуться к mp3 для пользовательских интерфейсов, которые не поддерживают Vorbis.
С учетом сказанного, похоже, что это связано с тем, как ваш сервер обслуживает файлы. Единственное отличие, которое я заметил, заключается в том, что ваш сервер отправляет заголовок Vary: Accept-Encoding. Но не уверен, является ли это причиной или нет.
Теперь, как вы увидите на моей тестовой странице, он использует:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<audio controls width="300">
<source src="test.oga" type='audio/ogg; codecs="vorbis"'>
<source src="test.mp3" type="audio/mpeg">
<a href="test.oga">test.oga</a>
<a href="test.mp3">test.mp3</a>
</audio>
</p>
</body>
</html>
Вот как вы можете вернуться к другим типам. Смотрите http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-source-element для получения дополнительной информации. Если mp3 и vorbis недостаточно, вы можете добавить аудио aac в контейнер mp4 / m4a в качестве другого запасного варианта.
Комментарии:
1. Это MP3. Я загрузил и протестировал на нескольких компьютерах (все Windows). И оно загружается на моем локальном компьютере для разработки, но не на моем рабочем компьютере.
2. можете ли вы добавить свои комментарии по поводу oggenc и audio / ogg к вашему ответу?
3. @PeeHaa. Здесь будет сделано немного позже.
4. @PeeHaa. Ну вот и все. Надеюсь, это немного поможет.
5. Вау, спасибо за тщательное тестирование! Я знаю о резервных вариантах. Я просто разделил его, чтобы иметь возможность легко видеть, что на самом деле происходит, в целях тестирования. Вам выражается особая благодарность ( pieterhordijk.com/sandbox/html5-audio-api )! 🙂
Ответ №2:
У меня была похожая проблема, по какой-то причине не загружались локальные файлы MP3, решением для меня было использовать файлы OGG, и все работало. Моей локальной системой разработки является Linux / apache2, и я тестировал с Firefox 8 и Chrome 15. Аудио-тег действительно работал с удаленными файлами MP3 и OGG, хотя я не знаю, почему они не работали локально, опять же, OGG работал локально.