Небольшое замечание.
С тех пор, как эта страничка была выложена в Сеть в середине 1999 года, она была украдена более двух десятков раз, и в устаревшем, урезанном виде, без какого-либо указания ссылок на источник или автора даже вошла в некий наборчик инструкций для строителя сайта и с тех пор кочует по сети, давно уже не отвечая новым стандартам.
Достаточно набрать в Яндексе название странички, чтобы убедиться, что это так.
Автор сочувствует жертвам этого распространения, до сих пор пытающимся запустить скрипты, рассчитанные на старые технологии, и советует читать страничку в оригинале, тут она (по крайней мере - изредка) - обновляется, а при желании поместить материал у себя на сайте - спросить разрешения и честно дать ссылку.
Простейший способ озвучить страничку - добавить в тело создаваемого документа
тэг вида:
<BGSOUND LOOP="1"
SRC="file.mid"</BGSOUND>
> Тэг имеет всего два
атрибута: LOOP задает число повторений проигрывания пьесы, (LOOP=0
позволяет мелодии звучать постоянно).SRC - файл-источник.
Подобные элементы при хорошем подборе музыкального файла могут создавать
оригинальную атмосферу сайта, но нужно учитывать разницу в звуковых картах,
применяемых посетителями, и предварительно прослушать, как выбранная пьеса
звучит "в исполнении" как можно большего количества карт. Второй совет - при
озвучивании событий - избегать музыки заднего плана - взаимодействие
проигрывателей и загрузка страницы не всегда проходят гладко.
Второй способ немногим сложнее, а для посетителя зачастую удобнее.
Встроим в страничку внешний проигрыватель (В последних версиях Эксплорера
это 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 и соответственно прописать его параметры.
Подавляющее большинство строителей страничек ограничивается указанными способами озвучки своих сайтов.
Но это все - решения статические, дизайнеры давно привыкли к анимированным кнопкам, динамически меняющимся надписям, мультипликации. Посетитель, бродя по странице, то и дело кликает, нажимает, наводит мышку. Как заставить страничку реагировать на его действия звуком?
Обладающие большими претензиями дизайнеры кидаются в омут самодельных и приобретенных джава апплетов, среди которых можно отметить мощный инструмент для создания анимированных кнопок Cool Button разных версий..
Наконец, быстрыми темпами растет армия поклонников технологии Flash - действительно, в скором времени обещающей сделать сеть говорящей и двигающейся.
Существуют ли решения, позволяющие без лишней мороки с настройкой, а главное, - при МИНИМУМЕ объема озвучить простейшие события на страничке?
К счастью, такие решения возможны.
Существует два довольно простых способа озвучить действие посетителя на своей страничке :
Первый способ реализуется следующим образом: В тело создаваемой странички вводится следующий код :
<OBJECT ID="sndplay" WIDTH="1" HEIGHT="1" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" TYPE="application/x-oleobject">Управление элементом осуществляется с помощью Джава скриптов.
С методами и свойствами встроенного нами элемента Вы можете ознакомиться на
страничке фирмы Майкрософт, ему посвященной.
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>
Результатом станет следующее произведение:
Замечу, что подобное решение для Нетскейпа вынуждает использовать фреймы, пусть даже нулевой толщины, и затруднит посетителю работу с документом. Веб-мастеру также придется подумать над вопросом своевременной загрузки звуковых файлов. Впрочем, метод славно работает. Рекомендую. :))
Само собою, озвучиванию можно подвергнуть любые события на странице -
движения мышью, клики на ссылках, наведение мыши на чувствительную область и
прочее.
Перейдем к обсуждению самого материала - файлов со звуками. Из трех основных форматов звука, с которым работает сеть - Real Audio, Wave, и MIDI форматов - предпочтительнее всего работа с миди-файлами. Проигрывая в "жизненности" звучания и широте выбора, требуя "прогонки" на разных звуковых картах, они обладают поистине бесценным для Сети свойством - МАЛЫМ РАЗМЕРОМ.
О свойствах и особенностях файлов MIDI Вы можете прочитать, к примеру, здесь.
Для работы нам потребуется какой-либо редактор, умеющий работать с этим
форматом, и в то же время не переполненный музыкальными "наворотами" и
"удобствами". Я порекомендовал бы Cakewalk Express или Cakewalk Pro. Продукт
этот можно скачать по FTP, разыскав по ключевому слову в поисковой системе,
например, в этой
Окно программы выглядит примерно так:
Когда звук найден, не торопитесь его сейвить. В меню FILE нажмите кнопку INFO
и аккуратно сотрите ВСЕ комментарии во всплывшем окне. Нажмите OK и спасите
файл. Проверив впоследствии его свойства, Вы с несказанной радостью убедитесь,
что занимает он считанные БАЙТЫ.
Можете скачать и попробовать следующие звуки:
ГОБОЙ Скачать |
СТРУННЫЕ Скачать |
ВИБРАФОН Скачать |
ТЕЛЕФОННЫЙ ЗВОНОК Скачать |
КОЛОКОЛЬЧИК Скачать |
СИТАР Скачать |
МЕТ. БАРАБАН Скачать |
Как пример забавной игрушки, которую можно сделать с помощью встроенных
элементов, можно попробовать вставить в страничку маленький музыкальный
инструмент.
|
Любителям броузеров Netscape: Звуковые скрипты этой страницы полностью работоспособны на броузере Netscape Navigator 6 с установленными проигрывателями миди-файлов, распознающими команду Play().
То есть, и кнопки и минипианино и даже открывающий "печатающий" заголовок страницы скрипт проверены и работают.
Также, правильно отображаются стилевые настройки кнопок.
Для более старых версий Нетскейпа скрипты, увы, не годятся, впрочем, если установлен плугин, проигрывающий миди-файлы, загрузка не вызывает ошибок и звуки можно просто прослушать.
Стилевые таблицы в старых версиях Нетскейпа не работают на кнопках, поэтому минипианино в броузерах этих версий не видно, и кнопки имеют одинаковый вид.
Каким плугином проигрывателя пользоваться - зависит от пристрастий пользователя - на моем Нетскейпе 6 установлен плугин производства компании Beatnik: http://www.beatnik.com/ , с которым и проверялась работа скриптов. Работа с плугином QuickTime не проводилась, если у кого установлен данный плугин - киньте, пожалуйста, строчку-другую в Гостевую книгу.
... Напоследок несколько важных замечаний:
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
В оформлении странички использована скульптура Вадима Абрамовича Сидура
"Взывающий".
Посетите виртуальный музей
скульптора!
Designed by Raduga, 1999-2001.