Озвучивание страниц
Озвучивание страниц
1. Простейший способ озвучивания - музыка сопровождения.
2. Встраивание элемента проигрывания звуковых файлов.
3. Два способа озвучить события на страничке для Интернет Эксплорера.
4. Подготовка звуковых файлов.
5. Коллекция супермаленьких MIDI - файлов.
6.Несколько важных замечаний.
Да, да! Наконец-то Вы нашли то, что так долго искали - Ваша страничка излечится от унылой немоты и запоет, заиграет, отвечая на нажатия кнопок или движение мыши. Вот оно! :O)
1.
Простейший способ озвучить страничку - добавить в тело создаваемого документа тэг вида:
<BGSOUND LOOP="1" SRC="file.mid"></BGSOUND>
Тэг имеет всего два атрибута: LOOP задает число повторений проигрывания пьесы, (LOOP=0 позволяет мелодии звучать постоянно).SRC - файл-источник.
Подобные элементы при хорошем подборе музыкального файла могут создавать оригинальную атмосферу сайта, но нужно учитывать разницу в звуковых картах, применяемых посетителями, и предварительно прослушать, как выбранная пьеса звучит "в исполнении" как можно большего количества карт. Второй совет - при озвучивании событий - избегать музыки заднего плана - взаимодействие проигрывателей и загрузка страницы не всегда проходят гладко.
2.
Второй способ немногим сложнее, а для посетителя зачастую удобнее.
Встроим в страничку внешний проигрыватель
Элементы эти удобны по двум причинам : во-первых, сам посетитель странички определяет, прослушивать ли ему Вашу пьесу или нет, и во-вторых, элементы предоставляют возможность задавать их размеры, и, при необходимости, даже полностью скрывать, делать невидимыми.
Тэг, задающий элемент проигрывателя, имеет вид:
<EMBED SRC="melodie.mid" name="sndplay" AUTOSTART="true" WIDTH="300" HEIGHT="40" ></EMBED>
Естественно, атрибуты WIDTH и HEIGHT отвечают за размеры представления элемента на странице, SRC указывает на файл-источник, а свойство AUTOSTART="true" дает проигрывателю команду исполнить пьесу сразу после загрузки файла, делая таким образом музыку заднего плана подконтрольной посетителю странички.
3.
Подавляющее большинство строителей страничек ограничивается указанными способами озвучки своих сайтов. Но это все - решения статические, дизайнеры давно привыкли к анимированным кнопкам, динамически меняющимся надписям, мультипликации. Посетитель, бродя по странице, то и дело кликает, нажимает, наводит мышку. Как заставить страничку реагировать на его действия звуком? Обладающие большими претензиями дизайнеры кидаются в омут самодельных и приобретенных джава апплетов, среди которых можно отметить мощный инструмент для создания анимированных кнопок Cool Button разных версий.. Наконец, быстрыми темпами растет армия поклонников технологии Flash - действительно, в скором времени обещающей сделать сеть говорящей и двигающейся. Существуют ли решения, позволяющие без лишней мороки с настройкой, а главное, - при МИНИМУМЕ объема озвучить простейшие события на страничке? К счастью, такие решения возможны. Существует два довольно простых способа озвучить действие посетителя на своей страничке :
- используя встраивание объекта - ActiveX элемента проигрывателя звуковых файлов
- Используя хитрость HTML - фреймы и создание документа "на лету"
Первый способ реализуется следующим образом: В тело создаваемой странички вводится следующий код :
<EMBED SRC="..." name="sndplay" WIDTH="1" HEIGHT="1">
Где вместо троеточия подставить название midi-файла. (о подготовке таких файлов - ниже, равно как и библиотека подходящего материала). Тэг этот создает невидимый для пользователя элемент проигрывания Вашего файла, и задача создателя странички заключается в том, чтобы заставить файл проигрываться "в ответ" на некоторые события на страничке.
Управление элементом осуществляется с помощью Джава скриптов. С методами и свойствами встроенного нами элемента Вы можете ознакомиться на страничке фирмы Майкрософт, ему посвященной.
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:
<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>
Второй способ озвучить действия на страничке нетривиален и остроумен, но с удобством применим только к броузерам, поддерживающим "плавающие окна".
Автору пришлось придумывать все с нуля. Для начала сформировалась сама идея реализации. Она заключалась примерно в этом: При наведении на ссылку срабатывает событие onMouseOver на JavaScript которое запускает некую процедуру или функцию. Та же в свое время, должна проиграть щелчок. Легко сказать проиграть, а как вот? Ну сразу оставив версию реализации этой фишки на Нетскейпе (кстати когда Вы прочтете этот текст, то Вы сможете свободно сделать это и для Нетскейпа, надо будет только использовать EMBED и обычный фрейм. Но не будем торопить события!), я занялся воплощением ее для MSIE.
Как заставить броузер Микрософта проиграть какой-нибудь музыкальный файл? - вставить тег <BGSOUND src="pesnia.mid" loop=1>, или pesnia.wav в зависимости от формата звукового файла. Вроде бы начали появляться первые отсветы в глубине туннеля :о) Поэтому подведем первые итоги. В тег ссылки вставляем событие onMouseOver примерно так:
<A href="url.html" onMouseOver="sound()">Ссылка</A>
И в начале документа html пишем скрипт, который бы выводил куда-нибудь тот BGSOUND.
Как всегда, руководствуясь принципом: попытка не пытка, написал такой скрипт:
<script language="JavaScript"><!--
function sound(){
document.write("<BGSOUND src=pesnia.mid loop=1>");}
--></script>
Божешь мой :-О, что получилось. Броузер правда проиграл музыку в MIDI формате, но он при этом показал чистую белую страницу созданную document.write и завис до окончания проигрыша песенки в midi формате. Приободренный тем, что он хоть играет песенку, я стал думать: а куда бы сгенерировать этот злосчастный BGSOUND, чтобы при этом остаться на нужной нам странице.
Та же форма, или еще какой объект не подходили, надо ведь генерируемый тег вставлять непосредственно в код страницы.
А если не в нашу страницу, а в другую... Которая бы тоже видна была... О это идея. Но единственный способ показать на экране не одну страницу, а две, является использование фреймов. Нда, а если их нет на странице, а если пользователь зайдет на страницу минуя главную и второй фрейм где прописывается бексаунд? И что тогда делать, ведь это приведет к ошибке в скрипте:о(
И тут я осознал, что идею то я воплощаю для MSIE пользователей, и в нем можно использовать не обычные, а плавающие фреймы встраиваемые в документ! Ваууу... разнеслось по моей комнате, как в древние времена разнеслось слово Эврика воскликнутое Архимедом. Правда в моем случае, мой кот, до этого мирно дремавший на кресле, почему-то вторил мне громогласным МЯУ! Поняв что зря так раскричался, я отправился варить рыбу этому рыжему созданию, но мысли мои витали в дебрях Ява скриптов и хтмл тегов. Придя вскоре назад к своему адскому ящику, и первым заняв кресло (хоть какая-то выгода :о), я окончательно создал следующий скрипт:
<script language="JavaScript"><!--
var brous;
function bsound(){
brous = navigator.appName;
if (brous.substring(0,1)=="M")
top.blank.document.write("<BGSOUND src=pesnia.mid loop=1>");}
--></script>
Здесь есть защита от генерации тега в нетскейпе, который не увидит плавающий фрейм, и не будет пытаться писать BGSOUND в несуществующий объект. blank - это так обозван этот самый фрейм, который я в свою очередь сжал до нулевых размеров и поместил сразу после тега BODY вот так:
<IFRAME FRAMEBORDER=0 HEIGHT=1 WIDTH=1
NAME="blank" SCROLLING=NO></IFRAME>
Как видите, здесь нет обычного свойства SRC=url.html указывающего, какую страницу надо показывать внутри плавающего фрейма. Поэтому он ничего не грузит в себя. И при наведении мышом на ссылку с onMouseOver="sound()" он воспроизводил музыку, генерировав документ с фоновым звуком в этом невидимом фрейме! Осталось дело за малым, сделать этот самый щелчок.
Сразу отказавшись от формата Wav из-за того, что файл звука щелчка, возможно, будет по объему больше самой страницы, я остановился на midi. И еще у меня были подозрения насчет того, а станет ли броузер вынимать звуковой файл из кеша, или грузить каждый раз заново. Кто знает эту продукцию микрософта. Поэтому щелчок мной стал делаться в midi формате. Нда, что только не приходится делать вебмастеру, и рисовать, и программировать, и верстать, и статьи придумывать, ну вот и музыку сочинять :о)
Благо от меня требовалось сочинения самого короткого произведения в виде звука "щелк". Запустив Cakewalk, я убрал все возможные комментарии внутри midi файла, чтобы уменьшить до минимума размер файла, поставил на первом треке 10 midi канал, который отвечает за ударные, я в опции piano roll написал две короткие нотки отвечающие за тихий щелчок, и маленький "дзиньк". Больше ничего не регулировал, ни звук, ни разнос по колонкам, дабы не увеличить размер файла. В итоге творение pesnia.mid получилось величиной 60 байт. В заключение, я в cамое начало документа, как можно ближе к скрипту, поставил <BGSOUND src="pesnia.mid" loop=1>, дабы звук уже был загружен до наведения на ссылку.
Вот и все!
Замечу, что подобное решение для Нетскейпа вынуждает использовать фреймы, пусть даже нулевой толщины, и затруднит посетителю работу с документом. Веб-мастеру также придется подумать над вопросом своевременной загрузки звуковых файлов. Впрочем, метод славно работает. Рекомендую. :))
Само собою, озвучиванию можно подвергнуть любые события на странице - движения мышью, клики на ссылках, наведение мыши на чувствительную область и прочее.
4.
Перейдем к обсуждению самого материала - файлов со звуками. Из трех основных форматов звука, с которым работает сеть - Real Audio, Wave, и MIDI форматов - предпочтительнее всего работа с миди-файлами. Проигрывая в "жизненности" звучания и широте выбора, требуя "прогонки" на разных звуковых картах, они обладают поистине бесценным для Сети свойством - МАЛЫМ РАЗМЕРОМ.
Для работы нам потребуется какой-либо редактор, умеющий работать с этим форматом, и в то же время не переполненный музыкальными "наворотами" и "удобствами". Я порекомендовал бы Cakewalk Express или Cakewalk Pro. Продукт этот можно скачать по FTP, разыскав по ключевому слову в поисковой системе, например, в этой Окно программы выглядит примерно так:
Кликните в рабочей области правой клавишей мышки и вызовите во всплывшем меню Piano Roll. В нашем случае удобнее работать с ним. Проставить ноту определенной высоты можно в этом окне "карандашиком", а затем, "подцепив" мышью за край цветного квадратика, установить длительность звучания, или "перетащить" ноту вверх или вниз по высоте звука. Все очень наглядно. Инструмент можно выбрать, кликнув на колонке "PATCH" в главной таблице. Всплывет окошко выбора инструмента, в котором будет выведен список возможных на Вашей карте тембров звучания. Поэкспериментируйте.
Когда звук найден, не торопитесь его сейвить. В меню FILE нажмите кнопку INFO и аккуратно сотрите ВСЕ комментарии во всплывшем окне. Нажмите OK и спасите файл. Проверив впоследствии его свойства, Вы с несказанной радостью убедитесь, что занимает он считанные БАЙТЫ.
5.В конце концов, рыться в архивах и учиться работать в новом редакторе довольно нудно, поэтому я заготовил небольшой архив файликов со звуками, которые могут пригодиться в оформлении страницы. Они представляют из себя полные октавы и исполнены на разных инструментах. Файлики разложены по зипам в зависимости от инструмента.
Можете распаковать и попробовать следующие звуки:
| ГОБОЙ Распаковать |
| СТРУННЫЕ Распаковать |
| ВИБРАФОН Распаковать |
| ТЕЛЕФОННЫЙ ЗВОНОК Распаковать |
| КОЛОКОЛЬЧИК Распаковать |
| СИТАР Распаковать |
| МЕТ. БАРАБАН Распаковать |
... Напоследок несколько важных замечаний:
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")...
к оглавлению
