Библиотека программиста

23.04.2024 - Фоновая музыка на html-страницах

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



Чаще всего используются звуковые файлы в форматах mp3 или wav. Как правило, они сильно сжаты для экономии времени их загрузки, не все ведь имеют выделенные каналы на несколько мб за секунду.

Даже само консорциум W3C довольно негативно относится к использованию тега <embed> на вебстраницах. Ведь в больщинстве сайтов звук не используется, поэтому его наличие чаще всего вызывает неприятные эмоции при посещении сайта с фоновой музыкой.

Но иногда встроить фоновый звук бывает необходимо. Рассмотрим, как это делается.

В реализации на HTML использование фоновой музыки не является сложной задачей. Вам просто необходимо выбрать звуковой файл. Это может быть музыкальная композиция в формате mp3, wav или ином, но при этом она должна быть как можно меньшей по размеру.

Теперь осталось лишь интегрировать звук в веб-страницу. Для этого был создан специальный тег <embed>.

Рассмотрим пример интеграции музыки в html-код. Вот пример кода, который будет воспроизводить музыку:

Код
<body>
<p>HTML background music test</p>
<embed src="sound.mp3" autostart="true">
</body>

.
.
.
.
.
Этот простой фрагмент кода просто проигрывает данный ему mp3 файл. Естественно, всякий звуковой файл имеет свою длительность. Но нам бы хотелось, чтобы при завершении его звучания, он снова стал проигрываться:

Код
<embed src="sound.mp3" autostart="true" loop="true">




Также можно контролировать размеры плагина:

Код
<embed src="sound.mp3" autostart="true" width="400" height="20">




Также было бы здорово, если бы у посетителя была возможность контролировать фоновую музыку, но иногда это трудно интегрировать в дизайн. Поэтому можно установить у тега <embed> вот такой скрытый параметр:

Код
<embed src="sound.mp3" autostart="true" loop="true" hidden="true">




Осталось лишь посоветовать быть очень осторожным при использовании фоновой музыки на вебсайте. Ведь мы ставим цель привлечь пользвателя и сделать его пребываение на ресурсе приятным.
Опубликовано на сайте: http://www.coders-library.ru
Прямая ссылка: http://www.coders-library.ru/index.php?name=news&op=view&id=71