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

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

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

IMG элемент.

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

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

1. Во-первых, вам нужен звуковой файл. Лучше всего записать файл в формате MP3 (

   .mp3), так как это высокое качество звука и поддерживается большинством браузеров (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ и Safari 5+).

2. Преобразуйте файл в формат Vorbis (

   .ogg), чтобы добавить поддержку Firefox 3.6 и Opera 10.5+. Вы можете использовать конвертер, как на Vorbis.com. Вы также можете конвертировать MP3 в формат WAV-файла (

   .wav), чтобы получить поддержку Firefox и Opera. Я рекомендую размещать файл во всех трех типах, просто для обеспечения безопасности, но вам больше всего нужны MP3 и еще один тип.

3. Загрузите все аудиофайлы на ваш веб-сервер и запишите каталог, в котором вы их хранят. Это хорошая идея разместить их в подкаталоге только для аудиофайлов, так как большинство дизайнеров сохраняют изображения в

   изображений каталог.

4. Добавить

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

5. Место

   ИСТОЧНИК элементы для каждого аудиофайла, который вы загружаете внутри

   AUDIO элемент:

6. 1. Любой HTML-код внутри

      AUDIO элемент будет использоваться как резерв для браузеров, которые не поддерживают

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

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

   2. Vorbis, WAV

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

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

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

   5. MP3,

   6. Vorbis,

   7. WAV

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

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