О з в у ч и в а н и е       с т р а н и ц.



Небольшое замечание.

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

Достаточно набрать в Яндексе название странички, чтобы убедиться, что это так.

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




1. Простейший способ озвучивания - музыка сопровождения.
2. Встраивание элемента проигрывания звуковых файлов.
3. Два способа озвучить события на страничке для Интернет Эксплорера.
4. Подготовка звуковых файлов.
5. Коллекция супермаленьких MIDI - файлов.
6. Забавный пример - мини-пианино.
7.Владельцам броузеров Netscape.
8.Несколько важных замечаний.
9. Гостевая книга. По прочтении странички - оставьте свои замечания.





Да, да! Наконец-то Вы нашли то, что так долго искали - Ваша страничка излечится от унылой немоты и запоет, заиграет, отвечая на нажатия кнопок или движение мыши. Вот оно!    :O)




1.

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

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

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

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


2.

Второй способ немногим сложнее, а для посетителя зачастую удобнее.
Встроим в страничку внешний проигрыватель (В последних версиях Эксплорера это Windows Media Player)


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

<OBJECT WIDTH="100" HEIGHT="100" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="melodie.mid">
<PARAM NAME="autostart" VALUE="1">
<PARAM NAME="showcontrols" VALUE="1">
<EMBED TYPE="audio/x-midi" SRC="melodie.mid" WIDTH="100" HEIGHT="100" AUTOSTART="1" SHOWCONTROLS="0"></EMBED>
</OBJECT>


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

Внутри понимаемого Эксплорером тега OBJECT можно вставить для совместимости "нетскейповский" тег EMBED и соответственно прописать его параметры.




3.

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

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

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

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

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

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

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


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

<OBJECT ID="sndplay" WIDTH="1" HEIGHT="1" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="...">
<PARAM NAME="autostart" VALUE="0">
<PARAM NAME="showcontrols" VALUE="1">
<EMBED ID="sndplay" TYPE="audio/x-midi" SRC="..." WIDTH="1" HEIGHT="1" AUTOSTART="0" SHOWCONTROLS="0"></EMBED>
</OBJECT>


Где вместо троеточия подставить название midi-файла. (о подготовке таких файлов - ниже, равно как и библиотека подходящего материала). Тэг этот создает невидимый для пользователя элемент проигрывания Вашего файла, (обратите внимание: параметр AUTOSTART установлен в "0", а ширина и высота - в один пиксел, также элементу присвоен ID: sndplay, по которому программы будут к нему обращаться) и задача создателя странички заключается в том, чтобы заставить файл проигрываться "в ответ" на некоторые события на страничке.

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

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

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

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

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

Вот результат:  


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

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

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

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

Вот, что получилось в результате:  


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

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

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


Атрибут 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()
{
document.img1.src="img/but2.gif"; document.sndplay.play();
}
function butup()
{
document.img1.src="img/but1.gif";
}
//--></script>

Результатом станет следующее произведение:

ЖМИ!






Второй способ озвучить действия на страничке нетривиален и остроумен, но с удобством применим только к броузерам, поддерживающим "плавающие окна". Описание этого способа Вы можете найти на страничке Клуба Web-дизайнеров. Единственное описание его реализации я встретил в сети на вот этой страничке. Уважая права автора способа, Алексея Мохового, и зная, насколько легко можно украсть результат труда Веб-дизайнера (страничка вся, как на ладони, и решение не скроешь от посетителя) я не стану вдаваться в подробности, и приглашу Вас почитать автора способа.

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

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



4.

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

О свойствах и особенностях файлов MIDI Вы можете прочитать, к примеру, здесь.

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

s

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

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



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

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

ГОБОЙ
Скачать

СТРУННЫЕ
Скачать

ВИБРАФОН
Скачать

ТЕЛЕФОННЫЙ ЗВОНОК
Скачать

КОЛОКОЛЬЧИК
Скачать

СИТАР
Скачать

МЕТ. БАРАБАН
Скачать





6.

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




8.

Любителям броузеров Netscape: Звуковые скрипты этой страницы полностью работоспособны на броузере Netscape Navigator 6 с установленными проигрывателями миди-файлов, распознающими команду Play().

То есть, и кнопки и минипианино и даже открывающий "печатающий" заголовок страницы скрипт проверены и работают.

Также, правильно отображаются стилевые настройки кнопок.

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

Стилевые таблицы в старых версиях Нетскейпа не работают на кнопках, поэтому минипианино в броузерах этих версий не видно, и кнопки имеют одинаковый вид.

Каким плугином проигрывателя пользоваться - зависит от пристрастий пользователя - на моем Нетскейпе 6 установлен плугин производства компании Beatnik: http://www.beatnik.com , с которым и проверялась работа скриптов. Работа с плугином QuickTime не проводилась, если у кого установлен данный плугин - киньте, пожалуйста, строчку-другую в Гостевую книгу.



8.

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

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

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

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

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

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

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

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



Свои замечания и ругательства без стеснения присылайте по адресу
dwa@worldmailer.com



В оформлении странички использована скульптура Вадима Абрамовича Сидура "Взывающий".
Посетите виртуальный музей скульптора!



ЗАГЛЯНИТЕ В ГОСТЕВУЮ КНИГУ!


Покидая страницу, нажмите на баннер, пожалуйста! Я открою для Вас новое окно, а в старом пусть погрузится страничка спонсора. Каждый клик очень важен, поверьте! Спасибо и - удачи!



Обзор серверов по недвижимости


Rambler's Top100 TopList Каталог Ресурсов Интернет MAFIA's Top100
Weblist UA Aport Ranker [Index'99] Counted by 'Country hits' rating.
Alpha TOP100 Ярмарка сайтов.Fair.ru

Designed by Raduga, 1999-2001.