Простейший способ озвучить страничку - добавить в тело создаваемого документа тэг вида:

<BGSOUND LOOP="1" SRC="file.mid"></BGSOUND>

Тэг имеет всего два атрибута: LOOP задает число повторений проигрывания пьесы, (LOOP=0 позволяет мелодии звучать постоянно).SRC - файл-источник.

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

Второй способ немногим сложнее, а для посетителя зачастую удобнее.
Встроим в страничку внешний проигрыватель

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

<EMBED SRC="melodie.mid" name="sndplay" AUTOSTART="true" WIDTH="300" HEIGHT="40" ></EMBED>

Естественно, атрибуты WIDTH и HEIGHT отвечают за размеры представления элемента на странице, SRC указывает на файл-источник, а свойство AUTOSTART="true" дает проигрывателю команду исполнить пьесу сразу после загрузки файла, делая таким образом музыку заднего плана подконтрольной посетителю странички.

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

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

Обладающие большими претензиями дизайнеры кидаются в омут самодельных и приобретенных джава апплетов, среди которых можно отметить мощный инструмент для создания анимированных кнопок Cool Button разных версий..

Наконец, быстрыми темпами растет армия поклонников технологии Flash - действительно, в скором времени обещающей сделать сеть говорящей и двигающейся.

Существуют ли решения, позволяющие без лишней мороки с настройкой, а главное, - при МИНИМУМЕ объема озвучить простейшие события на страничке?

К счастью, такие решения возможны.

Существует два довольно простых способа озвучить действие посетителя на своей страничке :

• используя встраивание объекта - ActiveX элемента проигрывателя звуковых файлов
• Используя хитрость HTML - фреймы и создание документа "на лету"

Первый способ реализуется следующим образом: В тело создаваемой странички вводится следующий код :

Управление элементом осуществляется с помощью Джава скриптов.

С методами и свойствами встроенного нами элемента Вы можете ознакомиться на страничке фирмы Майкрософт, ему посвященной.
ActiveMovie ActiveX Control

Приведем пример. В простейшем случае необходимо проиграть щелчок в момент клика посетителя на кнопке.

Создадим стандартную кнопку, вставив в страничку код:

<INPUT TYPE="submit" name="but1" style="background-color:white;font-family:monospace " VALUE="Нажми меня!">

Нажали? Молчит, да? Давайте озвучим. Вот, вставили мы в страничку элемент проигрывателя. Назвали его "sndplay".
Обратимся к нему из джава-скрипта:

<script language="JavaScript">
<!--
function playsound()
{
document.sndplay.run();
}
--></script>

Скопируем скрипт в страничку и вставим в тэг, задающий кнопку, команду ответить на клик на кнопке исполнением нашего джава-скрипта:

<INPUT TYPE="submit" name="but1" style="background-color:white;font-family:monospace " VALUE="Нажми меня!"ONCLICK="playsound();">

Ага, у меня заработало...

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

Если страничка черная, спокойно меняйте цвет кнопки на черный, а шрифта - на белый или сероватый.

Атрибут STYLE имеет при этом вид

style="background-color:black;color:#C0C0C0;font-weight:bold;font-family:monospace "

Такой способ озвучивания хорошо сочетается с анимированными скриптовыми кнопками.

Создадим две маленьких картинки, изображающих ненажатую и нажатую кнопки, but1.gif и but2.gif:
вcтавим первую кнопку в страничку, заполнив следующий тег:

<IMG SRC="img/but1.gif" name="img1" WIDTH="60" HEIGHT="50" BORDER="0" ALT="ЖМИ!" ONMOUSEOUT="butup();" ONMOUSEOVER="butdown();">

и напишем простенький скрипт

<script language="JavaScript">
<!--
im1 = new Image; im1.src="img/but1.gif";
im2= new Image; im2.src="img/but2.gif";
function butdown()
{
img1.src="img/but2.gif"; document.sndplay.run();
}
function butup()
{
img1.src="img/but1.gif";
}
--></script>

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

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

Перейдем к обсуждению самого материала - файлов со звуками. Из трех основных форматов звука, с которым работает сеть - Real Audio, Wave, и MIDI форматов - предпочтительнее всего работа с миди-файлами. Проигрывая в "жизненности" звучания и широте выбора, требуя "прогонки" на разных звуковых картах, они обладают поистине бесценным для Сети свойством - МАЛЫМ РАЗМЕРОМ.

Для работы нам потребуется какой-либо редактор, умеющий работать с этим форматом, и в то же время не переполненный музыкальными "наворотами" и "удобствами". Я порекомендовал бы Cakewalk Express или Cakewalk Pro. Продукт этот можно скачать по FTP, разыскав по ключевому слову в поисковой системе, например, в этой Окно программы выглядит примерно так:

Когда звук найден, не торопитесь его сейвить. В меню FILE нажмите кнопку INFO и аккуратно сотрите ВСЕ комментарии во всплывшем окне. Нажмите OK и спасите файл. Проверив впоследствии его свойства, Вы с несказанной радостью убедитесь, что занимает он считанные БАЙТЫ.

Можете распаковать и попробовать следующие звуки:

... Напоследок несколько важных замечаний:

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

2) При разбивке странички, обратите внимание на возможные глюки, происходящие со встраиваемыми элементами. То и дело выползающий из невидимости элемент проигрывателя под минипианино в моей страничке - пример такой неприятной особенности.

3) При подготовке файлов миди НЕ ВСТАВЛЯЙТЕ НОТЫ без некоторого ЗАЗОРА от начала. Это придаст некоторую задержку звуку, но избавит Вас от изумленного негодования по поводу необъяснимого поведения обсуждаемых ActiveX элементов. Помните : небольшая (1/8 такта) задержка!

4) По мере возможности, производите в скриптах проверку версии и названия броузера, многие обсуждаемые вещи проходят на одних броузерах и не проходят на других. В условиях войны "гигантов" рынка бедным разработчикам приходится то и дело удваивать количество кода или даже страниц.

Возможный текст скрипта, отслеживающий версию броузера приведу ниже:

<SCRIPT LANGUAGE="JavaScript">
<!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
if (browser_name == "Netscape" && browser_version >= 3.0) { roll =
'true'; }
else if (browser_name == "Microsoft Internet Explorer" &&
browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }
-->
</SCRIPT>

И дальнейшие функции начинаются с конструкции if(roll=="true")...

Поделитесь этой записью или добавьте в закладки