Воспроизведение звука в обратном и кросс-браузере

Мне нужно воспроизвести аудиофайлы во многих браузерах и разных версиях. Старая система создает 4-битные WAV файлы, которые многие браузеры не могут обрабатывать. Все файлы содержат синтезированные или записанные человеческие голоса. В любом случае мне нужно будет его заменить. Поэтому мои вопросы:

1) Каков наилучший формат файла для аудиофайлов в отношении совместимости, размера и качества?

2) Какой лучший способ использовать HTML5 и оставаться обратно совместимым?

Нам нужно поддерживать версии Internet Explorer 6, 7, 8 и 9; Firefox, Chrome и Safari.

Обновить: наконец, он работает для IE 6-9, Firefox и Chrome; еще не тестировали Safari. Я узнал, что для Safari для окон требуется Quicktime, а для IE требуется проигрыватель Windows Media.

Ответы

Ответ 1

Вот что я использую:

<audio autoplay>
    <source src="/static/sound/SOUND.mp3" type="audio/mpeg">
    <source src="/static/sound/SOUND.ogg" type="audio/ogg">
    <source src="/static/sound/SOUND.wav" type="audio/wav">
    <source src="/static/sound/SOUND.aiff" type="audio/x-aiff">
    <object>
        <param name="autostart" value="true">
        <param name="src" value="/static/sound/SOUND.mp3">
        <param name="autoplay" value="true">
        <param name="controller" value="false">
        <embed src="/static/sound/SOUND.mp3" controller="false" autoplay="true" autostart="true" type="audio/mpeg"></embed>
    </object>
</audio>

Я предоставляю один и тот же аудиоклип в MP3, OGG, WAV и AIFF, а затем позволяю браузеру выбирать, который он хочет воспроизвести. Тег audio предназначен для HTML5, тег object предназначен для более старых систем, а embed работает в некоторых системах, не поддерживающих тег объекта.

Я собрал это вместе с некоторой информацией на нескольких веб-сайтах, но, к сожалению, я забыл URL-адрес.

UPDATE

С тех пор я перешел на использование howler.js для этого. Он автоматически обрабатывает все проблемы, связанные с браузером, связанные со звуком. К сожалению, он не поддерживает IE 6-8, но я отказался от поддержки этих способов.

Ответ 2

С тегом HTML5 audio вы можете указать разные типы аудио, чтобы попытаться загрузить, поскольку каждый браузер позволяет использовать разные типы. На этой странице есть хорошая диаграмма совместимости: http://html5doctor.com/native-audio-in-the-browser/

Нижеприведенный код будет работать с большинством браузеров. Сначала он пытается новый метод HTML5 audio, затем возвращается к методу embed.

<audio width="100" height="100" autoplay="" controls="" tabindex="0">
<source type="audio/mpeg" src="songs/All-My-Life.mp3"></source>
<source type="audio/ogg" src="songs/All-My-Life.ogg"></source>
<source type="audio/wav" src="songs/All-My-Life.wav"></source>
<embed width="100" height="50" src="songs/All-My-Life.mp3">
</audio>