Звуковое сопровождение сайта обычно используется во Flash сайтах. В HTML сайтах музыка используется гораздо реже. В данной статье рассматривается использование звукового сопровождения с помощью HTML и javascript.

1. Фоновая музыка на странице. Наиболее частым примером использования музыки на сайте является фоновая музыка, которая играет при просмотре сайта. Добавить фоновую музыку на сайт задача сама по себе не сложная. Чтобы заставить играть музыкальной файл на странице достаточно вставить в HTML файл строчку вида: <bgsound src="имяфайла" loop="-1">. Параметр loop определяет количество повторов проигрывания данного звукового файла. -1 - проигрывать данный файл неограниченное число раз.
1.1 Форматы звуковых файлов для звукового сопровождения сайта. Проигрывание музыки начинается только после полной загрузки звукового файла, поэтому звуковой файл, используемый для оформления сайта должен занимать не более 50 КБ. Звуковой файл длительностью 1 мин в формате WAV будет занимать около 10 МБ, а в MP3 - от 300 КБ до 2 МБ. Намного меньший объем занимают файлы формата MIDI. MIDI - это мелодии, они не содержат слов песни, их звучание напоминает звучание мелодий мобильных телефонов, электронных часов, или же музыкальных подарочных открыток. MIDI файлы не содержат звуковой информации, как например WAV, или MP3. Они содержат только набор команд, которые исполняются синтезатором, встроенным в звуковую карту. Естественно команды MIDI занимают гораздо меньший объем, чем звуковая информация, так, к примеру, MIDI файл длительностью 1 мин. может занимать от 10 до 30 КБ.
1.2 Где взять MIDI файлы ? Дело в том, что конвертировать музыку из формата MP3 в MIDI каким-либо простым способом невозможно. Существуют специальные программы распознавания музыки, которые переводят музыкальные записи из MP3 или WAV в MIDI, но результаты работы этих программ далеко не всегда успешные. MIDI полученные с помощью таких программ обычно содержат лишние ноты. Из некоторых музыкальных файлов может получиться MIDI абсолютно не похожая на оригинал. Поэтому музыку в формате MIDI лучше всего скачать на коллекциях MIDI файлов, таких, как: www.midi.ru, www.midi.ovl.ru.
3. Озвучивание объектов на сайте. Это еще один пример использования звукового сопровождения. Можно сделать чтобы ссылки щелкали при наведении мыши. Для этого можно использовать вот такой скрипт:

<BGSOUND ID="sound2">
<script language="javascript">
function clicksound() { document.all.sound2.src = "click.wav"; }
</script>
<A HREF="http://" OnMouseOver="javascript:clicksound()">Ссылка</A>

После наведения мыши на ссылку будет проигрываться файл click.mid. Чтобы все это сработало вовремя, при наведении мыши на ссылку должен загрузится звуковой файл и воспроизвестись. Поэтому такой звуковой файл должен иметь очень маленькие размеры, не более 150 байт. Конечно же можно использовать и MIDI файл, но я применил формат WAV. Благодаря этому можно сочетать фоновую музыку на сайте и озвучивание ссылок. Мне удалось сделать WAV файл щелчка, который занимает всего лишь 104 байта.
4. Возможность отключения звукового сопровождения, или опции на сайте. Это самая главная проблема. Т.к. звуковое сопровождение сайта является весьма специфическим элементом, т.е. может понравится далеко не каждому посетителю. Бывает, что посетитель слушает свою музыку, и тут на ее фоне начинает что-то пиликать. Для решения данной проблемы я давно хотел придумать что-нибудь, чтобы пользователь по своему желанию мог отключить звуковое сопровождение сайта. Конечно же звук на сайте можно отключить и в настройках Internet Explorer'a, но каждый раз отключать, или включать музыку (допустим, если надо прослушать звук на каком-нибудь другом сайте) в настройках браузера не очень удобно. На некоторых сайтах появляется некая серая штука, на которой есть 3 кнопки воспроизведение/приостановить/остановить. Так, что включать или выключать музыку можно прямо на странице. Для этого используется следующий HTML код: <EMBED SRC="1.mid" WIDTH="70" HEIGHT="25" AUTOSTART="true" LOOP="true">. Замечу сразу, что это еще хуже, чем использовать тег <BGSOUND>: В этом случае при загрузке музыка начинает играть абсолютно независимо от настроек браузера, и отключить ее нельзя, кроме как нажав кнопку остановить. Естественно, если музыка повторяется на каждой странице это создает значительные неудобства - ее необходимо каждый раз отключать на следующей странице. Я давно думал над тем как с использованием javascript, при помощи работы с cookie можно было бы сделать опции на сайте, в данном случае: включать или отключать музыку на всех страницах сайта. Естественно нашлись бы и другие применения такому скрипту. Ведь при частом посещении сайта было бы очень неплохо, чтобы можно было настроить сайт в некоторых пределах, так как больше нравится. Мне доводилось видеть довольно много скриптов, работающих с cookie файлами. У меня оказался javascript, который считал сколько раз я уже был на этой странице, я же решил переделать его на что-нибудь полезное. При перетаскивании скрипта из одной папки в другую счетчик сбивался. Я решил поисследовать как это все работает. С этой целью я удалил все Cookie, и поместив скрипт в "Мои документы" запустил его. С помощью Notepad'a я посмотрел созданную скриптом Cookie и обнаружил, что в ней содержится адрес: C:/Мои документы, а имени HTML файла с этим скриптом в cookie нет. Таким образом выяснилось, что если в одной папке будет несколько HTML страниц с этим скриптом, счетчик не сбивается. Впоследствии я написал скрипт, с помощью которого можно сделать опции на странице. В данном примере скрипт включает и выключает музыку на сайте.
Вот и сам скрипт: Эта часть скрипта должна быть размещена между тегами <HEAD>...</HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
var caution = false

function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "")
if (!caution || (name + "=" + escape(value)).length <= 4000)
document.cookie = curCookie
else
if (confirm("Cookie exceeds 4KB and will be cut!"))
document.cookie = curCookie
}

function getCookie(name) {
var prefix = name + "="
var cookieStartIndex = document.cookie.indexOf(prefix)
if (cookieStartIndex == -1)
return null
var cookieEndIndex = document.cookie.indexOf(";",
cookieStartIndex + prefix.length)
if (cookieEndIndex == -1)
cookieEndIndex = document.cookie.length
return unescape(document.cookie.substring(cookieStartIndex
+ prefix.length, cookieEndIndex))
}

function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT"
}
}

function fixDate(date) {
var base = new Date(0)
var skew = base.getTime()
if (skew > 0)
date.setTime(date.getTime() - skew)
}

var now = new Date()
var now2 = new Date()
fixDate(now)
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)

var music = getCookie("counter")
if (!music)
music = 1
else
music = parseInt(music)
setCookie("counter", music, now)

function music_on() {
music = parseInt(music=1)
setCookie("counter", music, now)
}
function music_off() {
music = parseInt(music=0)
setCookie("counter", music, now)
}

// -->
</SCRIPT>

Эта часть скрипта должна находиться между тегами <BODY>...</BODY>:

<bgsound id=sound loop="-1">
<bgsound id=sound2 loop="1">

<script>
function nosound() { document.all.sound.src = ""; }
function sound() { document.all.sound.src = "1.mid"; }
if (music == 1) { sound() }
else { nosound() }
function clicksound() {
if (music == 0) { }
else { document.all.sound2.src = "click.wav"; }
}
</script>
<FORM>
<INPUT name=option type=radio value=1
OnClick="javascript:music_on();javascript:sound()">
Включить музыку <BR>
<INPUT name=option type=radio value=4
OnClick="javascript:music_off();javascript:nosound()">
Выключить звуковое сопровождение
</FORM>
<A HREF="http://" OnMouseOver="javascript:clicksound()">Ссылка</A>

Вы можете скачать данный скрипт вместе с необходимыми файлами (MIDI для фоновой музыки, и WAV (щелчки при наведении на ссылку) размером в 104 байта) в zip-архиве (переименуйте его из .y12 в .zip и затем распаковывайте). Настройки управляются с помощью формы, которую можно сделать, например, только на главной странице сайта. Данный скрипт имеет большие возможности. С помощью него можно задавать любое количество опций, но необходимо помнить, что он работет только тогда, когда все HTML файлы в которых он используется находятся в одной папке, т.е. для страниц с адресом к примеру, http://www.site.ru/index.html и http://www.site.ru/page.htm работать будет, если же файл находится в другой папке http://www.site.ru/pages/111.htm, СКРИПТ РАБОТАТЬ НЕ БУДЕТ, помните это.