Как я могу включить аудио на веб-сайт, используя HTML5? - PullRequest
Новая
       2

Как я могу включить аудио на веб-сайт, используя HTML5?

3 голосов
/ 07 сентября 2011

Меня попросили создать микросайт для клиента, и они хотят, чтобы это был веб-сайт в стиле презентации, который будет содержать звуковое повествование.

Они попросили сделать это в HTML5, но у меня нетВ HTML5 пока что ничего не создано.Кроме того, они хотят, чтобы он охватил широкую аудиторию, поэтому будет ли применим HTML5, каковы минимальные требования к браузеру?

Кроме Flash, есть ли способ создания озвучивания для страниц ... Может быть, jQuery или что-нибудь еще?

Будут ли варианты

  • HTML5 с ограниченной поддержкой браузера
  • Flash-сайт, который нельзя просмотреть на iPad / телефоне
  • Нет повествования!

Ответы [ 2 ]

4 голосов
/ 07 сентября 2011

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

Чтобы определить минимальные требования к браузеру, посетите здесь: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

Использование HTML5 Audio: http://www.w3schools.com/html5/html5_audio.asp

Для HTML5 Audio вам понадобится как минимум две копии звукового файла для каждого браузера: я бы сказал, одна в формате mp3, другая в Ogg Vorbis.

Вы можете использовать простой JavaScript для определения браузера, чтобы определить браузер и соответственно обслуживать контент: http://javascript.about.com/library/blbrsdet.htm

Как правило, передовой практикой будет определение поддержки, а затем возврат к порядку:

  1. Если они поддерживают HTML5, используйте <audio>
  2. Если они не поддерживают HTML5, проверьте поддержку flash. Если все в порядке, подайте флэш-аудио.
  3. Если нет, показать блок текста с содержанием повествования.

По сути, всегда обслуживайте новейшие и лучшие, но поддерживайте технологии, которые привели вас туда в первую очередь.

0 голосов
/ 23 января 2013

Этот код должен быть в высокой степени совместимым (IE6 +) с использованием WAVE: 

<![if (!IE)|(gte IE 9)]>
<audio id="speak" src="speak_a.wav" type="audio/wav"></audio>
<a href="#" onclick="document.getElementById('speak').play()">Speak</a>
<![endif]>
<!--[if lt IE 9]>
<bgsound id="speak" name="speak" autostart="false" loop="1">
<a href="#" onclick="document.all['speak'].src='speak_a.wav'">Speak</a>
<![endif]-->

Другой вариант, использующий как mp3 / ogg, так и совместимый: 

<![if (!IE)|(gte IE 9)]>
<audio id="speak">
  <source src="speak_a.ogg" type="audio/ogg" />
  <source src="speak_a.mp3" type="audio/mpeg" />
  <a href="speak_a.mp3">Download speak_a.mp3 if you cannot play it</a>
</audio>
<a href="#" onclick="document.getElementById('speak').play()">Speak</a>
<![endif]>
<!--[if lt IE 9]>
<bgsound id="speak" name="speak" autostart="false" loop="1">
<a href="#" onclick="document.all['speak'].src='speak_a.mp3'">Speak</a>
<![endif]-->

Если вы не используетеДля поддержки IE9 и более ранних версий достаточно тега <audio>: 

<audio id="speak">
  <source src="speak_a.ogg" type="audio/ogg" />
  <source src="speak_a.mp3" type="audio/mpeg" />
</audio>
<a href="#" onclick="document.getElementById('speak').play()">Speak</a>

Еще один старый способ воспроизведения звука: 

<object data="speak_a.wav" type="audio/wav">
  <embed src="speak_a.wav"></embed>
</object>

И вы также можете использовать третийсторонние библиотеки, такие как audio.js

...