Аудио HTML

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

Проблемы, проблемы и решения

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

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

В этой главе CodeW3C.com суммирует проблемы и их решения.

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

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

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

Можете использовать теги <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 tag> также может определить контейнер для внешнего (не 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) для решения проблемы проверки.

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

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

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

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

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

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

Пример

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

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

Инлайновый звук

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

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

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

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

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

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

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