Музыка на страницах собственного сайта – 2

Павел Живайкин

www.musicinform.narod.ru, paulzhiv@mtu-net.ru

В предыдущей статье мы рассматривали приемы размещения на страницах своего сайта аудиофайлов. Теперь настала очередь MIDI. Мы не будем глубоко проникать в недра MIDI-технологии и web-дизайна, рассмотрим только несколько практических примеров и попробуем использовать их в качестве исходных шаблонов.

Все, что вам нужно уметь, – заменять фрагменты кода web-страницы-шаблона своим текстом. Например, вместо we_are_the_champions.mid (имя MIDI-файла в шаблоне) напечатайте mi_tozhe_ne_likom_shiti.mid (имя вашего MIDI-файла).

Только следует иметь в виду, что во всех приведенных здесь примерах MIDI-файлы находятся в тех же папках, что и сами web-страницы. Если MIDI-файлы находятся в других папках (или даже на других сайтах), необходимо вместе с именем указывать полный путь к нему. Например, вместо my_best_song.mid что-то вроде http://mybestcompany.com/mybestmusic/ mybestmidi/my_best_song.mid.

Как работать с приведенными здесь шаблонами

Для начала научитесь открывать нужную web-страницу в блокноте или в любом редакторе web-страниц. Самый простой способ – прямо в окне браузера выбрать пункт меню View-Source (Вид-В виде HTML) – рис. 1. В этом случае откроется блокнот с html-кодом выбранной страницы.

Теперь перечислим все необходимые действия при работе с web-страницами-шаблонами.

1. Откройте в блокноте или web-редакторе свою страницу (ту, которую вы собираетесь редактировать).

2. Откройте в блокноте или web-редакторе страницу, сохраненную из сайта musicinform.narod.ru (которую вы будете использовать в качестве шаблона).

3. Выделите и скопируйте (Control+C) нужный фрагмент из страницы-шаблона.

4. Вставьте (Control+V) скопированный фрагмент в нужное место на своей странице.

5. Отредактируйте (замените имена файлов, текст и т.д.) вставленный фрагмент.

6. Сохраните новый вариант своей страницы и посмотрите его в браузере (F5).

7. Если не все получилось, как планировалось, вернитесь в пункт 5. И так до тех пор, пока ни получите требуемый результат.

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

Простота лучше... (но скучнее)

Самый простой вариант можно увидеть на рис. 2.

Ему соответствует следующий текст на web-странице:

<h3>Музыка группы &quot;Yes&quot;</h3>

<p>

<a href="almost_like_love.mid">almost_like_love.mid</a>

<br>

<a href="and_you_and_i.mid">and_you_and_i.mid</a>

<br>

<a href="heart_of_sunrise.mid">heart_of_sunrise.mid</a>

<h3>Музыка группы &quot;Led Zeppelin&quot;</h3>

<p>

<a href="immigrant_song.mid">immigrant_song.mid</a>

<br>

<a href="since_i_have_been_lovin_you.mid">since_i_have_been_ lovin_you.mid</a>

<br>

<a href="stairway_to_heaven.mid">stairway_to_heaven.mid</a>

</p>

Здесь <h3> – заголовок, <p> – новый абзац, <br> – новая строка в абзаце. Набор символов, ограниченный знаками < и >, называется тэгом. Впрочем, чтобы его вписать в нужное место на своей странице, вовсе не обязательно знать, как он называется.

Чтобы воспользоваться этим шаблоном, нужно провести три действия.

1. Впечатайте данный текст в то место на своей странице, где должен быть размещен список MIDI-файлов.

2. Замените текст между фрагментами <h3> и <h3> на свой – это будет заголовок.

3. Замените названия файлов (almost_like_love.mid и другие) на свои.

Вариант на рис. 3 отличается от предыдущего двумя пунктами: вместо названия файлов вставлены названия песен и добавлены короткие комментарии. Вот как это выглядит в html-коде:

<h3>Музыка группы &quot;Led Zeppelin&quot;</h3>

<p>

<a href="immigrant_song.mid">Immigrant song</a> –

мощный хард-рок.

<br>

<a href="since_i_have_been_lovin_you.mid">Since I have been

lovin you</a> – хард-роковый блюз.

<br>

<a href="stairway_to_heaven.mid">Stairway_to_heaven</a> –

рок-баллада.

</p>

Выглядит подобный список не очень презентабельно, и все же примерно так оформлены 75 процентов всех страниц со списками MIDI-файлов. А как оформлены остальные?

Шаблонный подход к сайтотворчеству

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

В зависимости от объема и структуры данных, которые будут связаны с нашими MIDI-файлами, возможны самые разные типы таблиц.

В шаблоне на рис. 4 представлен список MIDI-файлов в стилях блюз и джаз. ( стати, наконец-то достоверно установлено происхождение слова "джаз". Его ввезли в Америку в конце XIX века русские купцы через -ибирь, амчатку и Аляску. Выкушав после свершения очередной сделки, как полагается, ведро-другое водки, они устраивали в салунах Дикого Запада такие песни и пляски, что музыканты забывали про все ранее выученные лады и тональности. А когда под утро несчастные артисты обращались к русским купцам с просьбой объяснить, что за музыку их заставляли играть накануне, те неизменно отвечали: "Щас-с, разбежались!". Так что, "jazz" – это исковерканное русское "щас-с").

Итак, в списке на рис. 4 для каждого файла указана следующая информация – название песни или пьесы, исполнители или авторы, музыкальный стиль, размер файла в килобайтах, имя создателя этого MIDI-файла и комментарий.

А как эта таблица выглядит в html-коде?

<TABLE border=1 cellpadding=6 cellspacing=0 width="100%">

<TR align=center>

<TD>Название</TD>

<TD>Автор или исполнитель</TD>

<TD>Стиль</TD>

<TD> Комментарии</TD>

<TD>Размер</TD>

<TD>Сделал MIDI</TD>

</TR>

<TR valign=top>

<TD><A href="12barblues_ms.mid">12-Bar Blues</A></TD>

<TD>Michael Shirk</TD>

<TD>Blues<BR>Swing<br>Jazz</TD>

<TD>Стандартный 12-тактовый блюз с брасс-секцией</TD>

<TD align=right>36 кб</TD>

<TD align=center>Michael Shirk</TD>

</TR>

<TR valign=top>

<TD><A href="5x12.mid">5x12</A></TD>

<TD>Павел Живайкин</TD>

<TD>Slow&nbsp;Blues</TD>

<TD>5 квадратов медленного (12/8) блюза &quot;-1&quot;</TD>

<TD align=right>71 кб</TD>

<TD align=center>Павел Живайкин</TD>

</TR>

<TR valign=top>

<TD><A href="barzone.mid">Barznone Blues</A></TD>

<TD>B. B. King</TD>

<TD>Blues</TD>

<TD>Быстрый блюз</TD>

<TD align=right>60 кб</TD>

<TD align=center>aka &quot;oZ&quot;</TD>

</TR>

<TR valign=top>

<TD><A href="beforeac.mid">Before You Accuse Me</A></TD>

<TD>Jimmie Cox<BR>Bo Diddley<BR>Eric Clapton<BR><I>Автор</I> – Elias McDaniels</TD>

<TD>Blues<br>Delta&nbsp;Blues<br>Blues&nbsp;Rock</TD>

<TD>Можно найти в&nbsp;альбомах &quot;Journeyman&quot;

и &quot;Pretender&quot; Эрика лэптона</TD>

<TD align=right>51 кб</TD>

<TD align=center>?</TD>

</TR>

</table>

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

<table></table> – начало и конец таблицы;

<TR></TR> – начало и конец строки в таблице;

<TD></TD> – начало и конец ячейки в строке;

align – выравнивание по горизонтали внутри соответствующих ячеек;

valign – выравнивание по вертикали;

&nbsp; – ставится между словами, когда они обязательно должны находиться на одной строке.

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

Для этого в тэг такой ячейки введем параметр rowspan= и поставим число строк, объединенных этой ячейкой.

А теперь приведем html-фрагмент, соответствующий таблице на рис. 5:

<TABLE border=4 cellpadding=6 cellspacing=0 width="100%">

<TR align=center>

<TD> Композитор</TD>

<TD>Название</TD>

<TD>Размер файла</TD>

<TD>Время звучания</TD>

</TR>

<TR>

<TD rowspan=3>Albeniz, Isaac</TD>

<TD><A href="granada.mid">Granada

( Suite Espanola No.1)</A></TD>

<TD align=right>21K</TD>

<TD align=right>5:01</TD>

</TR>

<TR>

<TD><A href="pavana.mid">Pavana Capricho</A></TD>

<TD align=right>36K</TD>

<TD align=right>4:23</TD>

</tr>

<TR>

<TD><A href="caleta.mid">Rumores

de la Caleta (Malaguena)</A></TD>

<TD align=right>28K</TD>

<TD align=right>3:56</TD>

</TR>

<TR>

<TD>Debussy, Claude</TD>

<TD><A href="lune_g.mid">Clair de Lune

(Suite Bergamasque No.3)</a></td>

<TD align=right>24K</TD>

<TD align=right>5:19</TD>

</TR>

<TR>

<TD rowspan=2>Tarrega, Francisco</TD>

<TD><A href="adelita.mid">Adelita (Mazurka)</A></TD>

<TD align=right>7K</TD>

<TD align=right>1:51</TD>

</TR>

<TR>

<TD><A href="lagrima.mid">Lagrima (Prelude)</A></TD>

<TD align=right>8K</TD>

<TD align=right>2:12</TD>

</TR>

</table>

Иногда рядом с названием песни ставят имя MIDI-файла (особенно, когда это имя сильно сокращено, например, "Первый концерт для фортепиано с оркестром" – 1cncrt.mid). огда названия вовсе нет, можно оставить только имя MIDI-файла.

Такой пример можно найти на сайте musicinform в разделе, содержащем шаблоны аккомпанемента в различных музыкальных стилях (рис. 6). Заметьте, что здесь нужный MIDI-файл можно открыть, щелкнув и по имени файла, и по нотной строке.

Разобравшись в предыдущих примерах, вы без труда сможете вставить в свою страницу и отредактировать html-код для примера на рис. 6 (а вместо нотного текста можно вставить любую картинку):

<h2>Музыкальный стиль – баллада</h2>

<ul>

<h3>Инструмент – акустическая гитара</h3>

</ul>

<TABLE border=0 cellpadding=0 cellspacing=10 width="100%">

<TR align=center>

<TD>Имя файла</TD>

<TD>Первые такты</TD>

</TR>

<TR>

<TD align=right><A href="25ba41.mid">25ba41.mid</A></TD>

<TD><A href="25ba41.mid"><img src="25ba41.gif" width="774"

height="78" border="0"></A></TD>

</TR>

<TR>

<TD align=right><A href="25ba42.mid">25ba42.mid</A></TD>

<TD><A href="25ba42.mid"><img src="25ba42.gif" width="775"

height="80" border="0"></A></TD>

</TR>

<TR>

<TD align=right><A href="25ba49.mid">25ba49.mid</A></TD>

<TD><A href="25ba49.mid"><img src="25ba49.gif" width="775"

height="82" border="0"></A></TD>

</TR>

<TR>

<TD align=right><A href="25ba50.mid">25ba50.mid</A></TD>

<TD><A href="25ba50.mid"><img src="25ba50.gif" width="774"

height="82" border="0"></A></TD>

</TR>

</table>

Принцип использования шаблонов с таблицами остается прежним.

1. Впечатайте в свою страницу приведенный в примерах код (или скопируйте его из шаблонов).

2. Замените названия файлов на свои.

3. Замените текстовые фрагменты (заголовки таблиц, комментарии и т.д.).

4. Сохраните и пользуйтесь.

И напоследок скриптиз

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

Часть скриптов, используемых в Интернете, распространяется бесплатно, часть – как обычный платный программный продукт. Мы будем применять на своих web-страницах несложные скрипты из первой группы. Условием их легального применения обычно является требование авторов не переделывать и не выдавать их за свои (иногда еще и использовать только на некоммерческих сайтах). Такие замечательные условия почему бы и не выполнить?

В Интернете можно найти десятки тысяч бесплатных скриптов – забавных, полезных (впрочем, и бесполезных тоже много). Можно просто набрать в поисковой машине "script midi free" – остальное зависит от вашего умения отсеивать ненужное и скачивать полезное.

Из всех видов и типов этих "зверей" выберем пока один – java-скрипты, внедряемые в тело web-страницы в виде обычного текстового фрагмента.

MIDI-плейер с обычным набором кнопок управления – рис. 7. Для реализации такого плейера необходимо предпринять несколько шагов.

1. Переименуйте список ваших MIDI-файлов следующим образом: song1.mid, song2.mid… и так далее.

2. Вставьте следующий текст в то место на вашей странице, где должен находиться MIDI-плейер (или скопируйте его из шаблона на сайте musicinform.narod.ru):

<!-- Start Of Midi Master Script -->

<!-- MIDI Player that allows you to choose songs/tracks -->

<!-- Instructions: Just put this script anywhere on your webpage

that you wish to have a user interface.

<!-- Script supplied with CoffeeCup HTML Editor -->

<!-- www.coffeecup.com -->

<Script Language="JavaScript">

<!-- Hiding

song = new Array()

var x = 0

song[1] = "Не искушай"

song[2] = "Ямщик, не гони лошадей"

song[3] = " алитка"

song[4] = ""тро туманное"

song[5] = "Дорогой дальнею"

song[6] = "Нет, не любил он"

function prev(){

if (x>1)

{ x--

document.midi.typein.value=song [x]

}

}

function next(){

var max= song.length-1

if (x<max)

{ x++

document.midi.typein.value=song [x]

}

}

function go(){

if (x != 0){

location.href='song'+x+'.mid'

}

}

function start(){

x=1

document.midi.typein.value=song [x]

}

function end(){

x=song.length-1

document.midi.typein.value=song [x]

}

function cls(){

document.midi.typein.value="Выберите песню"

}

// Done Hiding -->

</Script>

<Center>

<FORM Name="midi">

<INPUT NAME="typein" TYPE="text" SIZE="25" ALIGN=top><BR>

<font size=3 face="Comic Sans Ms">

<INPUT TYPE=Button Value="|<<" Align=left onclick="start()">

<INPUT TYPE=Button Value="<<" Align=left onclick="prev()">

<INPUT TYPE=Button Value="PLAY" Align=left onclick="go()">

<INPUT TYPE=Button Value=">>" Align=left onclick="next()">

<INPUT TYPE=Button Value=">>|" Align=left onclick="end()">

</FORM></font>

</Center>

<!-- End Of Midi Master Script -->

3. Чтобы при загрузке страницы в окошке плейера появлялась надпись "Выберите песню", между <body> и </body> вставьте текст:

onload="cls()"

4. Вместо названий романсов (после фрагмента "song[1] =" и так далее) вставьте названия своих песен. Сохраните страницу – все готово!

Кто бродит по MIDI-сайтам в Интернете, заметил, как много места занимают списки с именами MIDI-файлов. Порой портянки, на которых перечисляются все помещенные на эту страницу файлы, тянутся вниз на 20–30 экранов.

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

1. Напечатайте этот текст (или скопируйте из шаблона на сайте musicinform) на вашей странице где-нибудь между <head> и </head>:

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Nicholas Loar -->

<!-- Web Site: http://www.cass.net/~anarchy -->

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

songNum = new Array();

songNum[0] = "#";

songNum[1] = "breathe_in_the_air.mid";

songNum[2] = "time.mid";

songNum[3] = "the_great_gig_in_the_sky.mid";

songNum[4] = "money.mid";

songNum[5] = "us_and_them.mid";

songNum[6] = "brain_damage.mid";

var music = null;

var track = 0;

var ver = navigator.appName;

function audioCheck(plugName) {

for (var i = 0; i < navigator.plugins.length; i++) {

if (navigator.plugins[i].name.toLowerCase() ==

plugName.toLowerCase()) {

for (var j = 0; j < navigator.plugins[i].length; j++) {

if (navigator.plugins[i][j].enabledPlugin) {

return true;

}

}

return false;

}

}

return false;

}

function chooseSong(s) { // ie

track = s.options[s.selectedIndex].value;

if (ver == "Microsoft Internet Explorer") {

document.all.music.src = songNum[track];

} else {

songPlay('play');

}

}

function songPlay(cmd) { // netscape

if (audioCheck("LiveAudio")) {

if (cmd == 'play') {

document.musicSource.play(false, songNum[track]);

}

} else {

alert("You Do Not Have The Correct Plugin");

}

}

// End -->

</script>

2. После фрагмента songNum[1] = и ему подобных впишите имена своих MIDI-файлов (они должны быть в кавычках).

3. В том месте на вашей web-странице, где должно появляться окно с выбором MIDI-файлов, введите (или скопируйте из шаблона) следующий текст:

<form name=choose>

<select size=1 name=track onChange="chooseSong(this);">

<option value="0">Dark Side Of The Moon –

Обратная сторона Луны</option>

<option value="1">Breathe In The Air</option>

<option value="2">Time</option>

<option value="3">The Great Gig In The Sky</option>

<option value="4">Money</option>

<option value="5">Us And Them</option>

<option value="6">Brain Damage</option>

</select>

<input type=button onMouseDown="chooseSong(document.choose. track)" value=" Play ">

</form>

<script language="JavaScript">

<!-- Begin

var ver = navigator.appName;

if (ver == "Microsoft Internet Explorer") {

document.write('<bgsound src="#" ID=music loop=1

AUTOSTART=true>');

} else {

document.write('<embed type="audio/midi" src="aeroplane.mid"

AUTOSTART=false hidden=true VOLUME="90" name="musicSource"

MASTERSOUND></EMBED>');

}

// End -->

</script>

4. После фрагмента <option value="0"> напечатайте название вашей группы файлов, а затем замените названия песен группы Pink Floyd на названия своих файлов – они и будут появляться в выпадающем меню.

5.С-охраните отредактированную страницу и загрузите ее в браузере.Теперь можно, щелкнув по окошку, увидеть весь список и выбрать любое название – песня тут же зазвучит (если, конечно, браузер и Windows знают, каким плейером проигрываются у вас MIDI-файлы).

Если вы хотите создать несколько таких меню (например, на рис. 8 их четыре), сделайте в процессе создания web-страницы еще пару шагов.

6. В первом скопированном разделе продолжите список имен файлов начиная с songNum[7] = (если у вас в первой группе было тоже 6 файлов). Например, в моем шаблоне это будет выглядеть так:

songNum[7] = "wish_you_were_here.mid";

songNum[8] = "shine_on_you_crazy_diamond.mid";

songNum[9] = "have_a_cigar.mid";

songNum[10] = "wish_you_were_here.mid";

7. В то место на странице, где должно находиться новое окно с выпадающим меню MIDI-файлов, впечатайте следующий текст:

<form name=choose>

<select size=1 name=track onChange="chooseSong(this);">

<option value="7">Wish You Were Here – Вас бы сюда</option>

<option value="8">Shine On You Crazy Diamond</option>

<option value="9">Have A Cigar</option>

<option value="10">Wish You Were Here</option>

</select>

<input type=button onMouseDown="chooseSong(document.choose. track)" value=" Play ">

</form>

Разумеется, в этих фрагментах вам нужно вставить имена своих файлов (пункт 6) и соответствующие им названия песен (пункт 7).

Удачного сайтостроительства!