Как добавить звук на веб-страницу HTML5

Содержание

1 Как добавить звук на веб-страницу HTML5
2 Дополнительные советы

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

Преимущество использования HTML5 заключается в том, что вы можете встраивать звук, просто используя пару тегов. Браузеры воспроизводят звук точно так же, как при отображении изображения.

IMG

элемент.

Как добавить звук на веб-страницу HTML5

Вам понадобится редактор HTML, звуковой файл (желательно в формате MP3) и конвертер звуковых файлов.

Во-первых, вам нужен звуковой файл. Лучше всего записать файл в формате MP3 (
```
.mp3
```
), поскольку он имеет высокое качество звука и поддерживается большинством браузеров (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ и Safari 5+).
Конвертируйте ваш файл в формат Vorbis (
```
.OGG
```
) добавить поддержку Firefox 3.6+ и Opera 10.5+. Вы можете использовать конвертер, подобный найденному на Vorbis. Вы также можете конвертировать MP3 в формат WAV (
```
.WAV
```
), чтобы получить поддержку Firefox и Opera. Лучше всего публиковать ваш файл во всех трех типах, просто для безопасности, но больше всего вам нужны MP3 и еще один тип.
Загрузите все аудиофайлы на ваш веб-сервер и запишите каталог, в котором вы их сохранили. Рекомендуется поместить их в подкаталог только для аудиофайлов, как большинство дизайнеров сохраняют изображения в
```
картинки
```
каталог.
Добавить
```
AUDIO
```
элемент в ваш файл HTML, где вы хотите, чтобы отображались элементы управления звуковым файлом.
Место
```
ИСТОЧНИК
```
элементы для каждого аудио файла, который вы загружаете внутри
```
AUDIO
```
элемент:
```
 
```
1. Любой HTML внутри
```
AUDIO
```
  элемент будет использоваться в качестве запасного варианта для браузеров, которые не поддерживают
```
AUDIO
```
  элемент. Так что добавьте немного HTML. Самый простой способ — добавить HTML, чтобы они могли загрузить файл, но вы также можете использовать методы встраивания HTML 4.01 для воспроизведения звука. Вот простой запасной вариант:
```
 Ваш браузер не поддерживает воспроизведение аудио, загрузите файл: MP3,
```
2. ```
Vorbis, WAV 
```

Последнее, что вам нужно сделать, это закрыть элемент AUDIO:

Когда вы закончите, ваш HTML должен выглядеть так:

```
  
```
```
  
```

Ваш браузер не поддерживает воспроизведение аудио, скачайте файл:

```
  MP3,
```
```
  Vorbis,
```
```
  WAV 
```

Дополнительные советы

Обязательно используйте HTML5 doctype (), чтобы ваш HTML был проверен
Просмотрите атрибуты, доступные для элемента, чтобы увидеть, какие другие параметры вы можете добавить к своему элементу.
Обратите внимание, что вы настроили HTML для включения элементов управления по умолчанию и выключили автозапуск. Конечно, вы можете изменить это, но помните, что многие люди находят звук, который запускается автоматически / который они не могут контролировать, чтобы он был в лучшем случае раздражающим, и часто просто покидают страницу, когда это происходит.