Аудио HTML

Существует множество способов воспроизведения звука в HTML.

Вопросы, вопросы и методы их решения

Воспроизведение аудио в HTML не так легко!

Вам нужно знать множество навыков, чтобы обеспечить воспроизведение ваших аудиофайлов на всех браузерах (Internet Explorer, Chrome, Firefox, Safari, Opera) и на всех устройствах (PC, Mac, iPad, iPhone).

В этой главе CodeW3C.com предлагает вам краткое изложение вопросов и методов их решения.

Использование плагинов

Браузерные плагины - это небольшие компьютерные программы, которые расширяют стандартные функции браузера.

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

Для добавления плагина в веб-страницу можно использовать теги <object> или <embed>.

Эти теги определяют контейнеры для ресурсов (обычно не HTML-ресурсы), которые могут отображаться браузером или внешним плагином в зависимости от типа.

Использование тега <embed>

Тег <embed> определяет контейнер для внешнего (не HTML) содержимого. (Это тег HTML5, который в HTML4 является非法ным, но работает во всех браузерах).

Следующий фрагмент кода может отображать вставленный в веб-страницу файл MP3:

Пример

<embed height="100" width="100" src="song.mp3" />

Попробуйте сами

Вопрос:

  • Тег <embed> в HTML 4 неэффективен. Страница не может быть проверена по HTML 4.
  • Разные браузеры поддерживают различные форматы аудио.
  • Если браузер не поддерживает формат файла, без плагина аудио не будет воспроизводиться.
  • Если на компьютере пользователя не установлено плагина, аудио не будет воспроизводиться.
  • Если файл будет преобразован в другой формат, он все равно не будет воспроизводиться во всех браузерах.

Примечание:Используйте <!DOCTYPE html> (HTML5) для решения проблемы проверки.

Использование элемента <object>

Тег <object> также может определять контейнер для внешнего (не HTML) содержимого.

Следующий фрагмент кода может отображать вставленный в веб-страницу файл MP3:

Пример

<object height="100" width="100" data="song.mp3"></object>

Попробуйте сами

Вопрос:

  • Разные браузеры поддерживают различные форматы аудио.
  • Если браузер не поддерживает формат файла, без плагина аудио не будет воспроизводиться.
  • Если на компьютере пользователя не установлено плагина, аудио не будет воспроизводиться.
  • Если файл будет преобразован в другой формат, он все равно не будет воспроизводиться во всех браузерах.

Использование элемента <audio> HTML5

Элемент <audio> является элементом HTML5, который в HTML 4 является非法ным, но работает во всех браузерах.

Пример

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Ваш браузер не поддерживает этот формат аудио.
</audio>

Попробуйте сами

В примере используется файл mp3, поэтому он работает в Internet Explorer, Chrome и Safari.

Чтобы сделать это аудио действительным в Firefox и Opera, был добавлен файл типа ogg. Если это не сработает, будет отображаться сообщение об ошибке.

Вопрос:

  • Тег <audio> в HTML 4 неэффективен. Ваша страница не может быть проверена по HTML 4.
  • Вам нужно конвертировать аудиофайл в другой формат.
  • Элемент <audio> не работает в старых браузерах.

Примечание:Используйте <!DOCTYPE html> (HTML5) для решения проблемы проверки.

Лучшие решения HTML

Пример

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

Попробуйте сами

В приведенном примере используются два разных аудио формата. Элемент HTML5 <audio> пытается воспроизвести аудио в формате mp3 или ogg. Если это не удается, код попытается использовать элемент <embed>.

Вопрос:

  • Вам нужно преобразовать аудио в другой формат.
  • Элемент <audio> не может пройти проверку HTML 4 и XHTML.
  • Элемент <embed> не может пройти проверку HTML 4 и XHTML.
  • Элемент <embed> не может откатиться для отображения сообщения об ошибке.

Примечание:Используйте <!DOCTYPE html> (HTML5) для решения проблемы проверки.

Как самый простой способ добавить аудио на веб-сайт

Как самый простой способ добавить аудио на веб-страницу?

Медиа плеер Яху绝对 можно отнести к числу лучших.

Использование Яху медийного плеера - это другой способ. Вам нужно просто позволить Яху выполнить задачу воспроизведения песни.

Он может воспроизводить mp3 и ряд других форматов. Добавив всего одну строку кода, вы можете добавить его на страницу, легко преобразовав HTML страницу в профессиональный плейлист.

Яху медийный плеер

Пример

<a href="song.mp3">Воспроизвести звук</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

Попробуйте сами

Использование Яху плеера бесплатно. Для использования его вам нужно вставить этот JavaScript в нижнюю часть страницы:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Далее просто добавьте ссылку на MP3 файл в ваш HTML, и JavaScript автоматически создаст кнопку воспроизведения для каждой песни:

<a href="song1.mp3">Воспроизвести песню 1</a>
<a href="song2.mp3">Воспроизвести песню 2</a>
...
...
...

Яху медийный плеер предоставляет вашим пользователям небольшую кнопку воспроизведения, а не полный плеер. Однако, когда вы нажимаете на эту кнопку, появляется полный плеер.

Обратите внимание, что этот плеер всегда находится в нижней части окна. Достаточно просто щелкнуть по нему, чтобы его вывести за пределы окна.

Использование гиперссылок

Если веб-страница содержит ссылки на медиафайлы, большинство браузеров будут использовать "дополнительное приложение" для воспроизведения файла.

Следующий фрагмент кода показывает ссылку на файл mp3. Если пользователь щелкнет по этой ссылке, браузер запустит "дополнительное приложение", чтобы воспроизвести файл:

Пример

<a href="song.mp3">Воспроизвести звук</a>

Попробуйте сами

Встроенный звук

Когда вы включаете звук в веб-странице или он является частью веб-страницы, он называется встроенным звуком.

Если вы планируете использовать встроенный звук в веб-приложении, вам нужно осознавать, что многие люди считают встроенный звук раздражающим. Также обратите внимание, что пользователь может уже отключить параметр встроенного звука в браузере.

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

Мультимедийные теги HTML 4.01

Тег Описание
<applet> Не рекомендуется. Определяет встроенный applet.
<embed> Не рекомендуется в HTML4, разрешено в HTML5. Определяет встроенный объект.
<object> Определяет встроенный объект.
<param> Определяет параметры объекта.

Мультимедийные теги HTML 5

Тег Описание
<audio> Тег определяет звук, например, музыку или другой аудиопоток.
<embed> Теги определяют встроенный контент, например, плагины.