Форум мастеров

Для добавления музыки на веб-страницу применяется элемент <audio>, атрибут src которого задаёт адрес аудиофайла. Лучше всего браузеры поддерживают формат MP3 — это достаточно популярный, широко используемый и распространённый формат. MP3 поддерживает алгоритм сжатия с потерями, что позволяет уменьшить объём файла за счёт снижения качества звука. Таким образом для себя можно подобрать оптимальное соотношение качества и объёма файла.

Элемент <audio> позволяет автоматически проигрывать мелодию, зацикливать её, выключать звук и выводит плеер, с помощью которого можно управлять воспроизведением и громкостью. У каждого браузера плеер собственного вида (рис. 1), при этом сохраняются основные элементы управления: кнопки воспроизведения, паузы, перемотки, отключения звука, ползунок для изменения уровня громкости.

Internet Explorer

Internet Explorer

Chrome и Opera

Chrome и Opera

Firefox

Firefox

Рис. 1. Проигрыватель аудиофайла

По умолчанию <audio> не выводит проигрыватель, для его добавления следует использовать атрибут controls, как показано в примере 1.

Пример 1. Проигрыватель аудиофайла

<!DOCTYPE html>
<html>
 <head>
  <title>audio</title>
  <meta charset="utf-8">
 </head>
 <body>
  <audio src="audio/evil.mp3" controls></audio>
 </body>
</html>

Чтобы сразу воспроизвести мелодию без нажатия на какие-либо дополнительные кнопки, к <audio> добавляется атрибут autoplay. Зациклить мелодию, иными словами, повторять её бесконечное число раз помогает атрибут loop. Комбинация этих атрибутов позволяет после загрузки веб-страницы автоматически воспроизвести зацикленную мелодию (пример 2).

Пример 2. Зацикленная мелодия

<!DOCTYPE html>
<html>
 <head>
  <title>audio</title>
  <meta charset="utf-8">
 </head>
 <body>
  <audio src="audio/evil.mp3" autoplay loop></audio>
 </body>
</html>

Будьте осторожны, без атрибута controls остановить такое аудио пользователь сможет только средствами браузера.