Скрипт: Фоновая музыка на сайте с панелью управления
Автор: Андрей Краснокутский
Дата: 2011-03-13 Как управлять музыкой на сайте.
Продолжаем тему "Музыка на сайте". В прошлом уроке, мы рассматривали скрипт, который начинал проигрывать музыку, сразу после загрузки web-страницы и посетитель не мог управлять звуком, это не всегда удобно, к тому же мелодия прогрывалась только одна.
Сегодняшний скрипт отображает панель управления на web-странице, с помощью которой посетитель сайта может самостоятельно управлять звуком. Кроме того, Вы можете загрузить неограниченное количество музыкальных композиций, предварительно прописав название этих музыкальных файлов в скрипте. Кстати название музыкального произведения, тоже будет отображаться.
Посмотреть пример работы скрипта. С помощью панели управления посетитель сайта может самостоятельно запустить на воспроизведение или остановить музыку, может перемотать вперед, уменьшить/увеличить звук.
Полностью код размещения скрипта на web-странице приведен в Листинге 1.
Листинг 1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Фоновая музыка панелью управления и случайным выбором композиции (с названием композиции)</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
song = new Array(6);
title = new Array(6);
song[0] ='sound/0.mid'
song[1] ='sound/1.mid'
song[2] ='sound/2.mid'
song[3] ='sound/3.mid'
song[4] ='sound/4.mid'
song[5] ='sound/5.mid'
song[6] ='sound/6.mid'
title[0] = 'ДДТ Что такое осень'
title[1] = 'Любе Комбат'
title[2] = 'Машина времени Костер'
title[3] = 'Машина времени Марионетки'
title[4] = 'ДДТ Что такое осень'
title[5] = 'ДДТ Ветер'
title[6] = "ДДТ Последняя осень"
index = Math.floor(Math.random() * song.length);document.write("<DL>\n");
document.write("<EMBED SRC="+song[index]+" width=300 height=28 autostart=true loop=infinite");
/*width=300 height=28 размиры панели управления*/
document.write(' TEXT="#FFFFFF">');
document.write("<font face=arial>");
document.write(" ");
document.write("<font face=arial color=red>");
document.write(title[index]);
document.write("</font>")
document.write("</DL>\n");
</SCRIPT>
</body>
</html>
| |
Музыка начинает проигрываться автоматически, сразу после загрузки web-страницы. После перехода на другую web-страницу или обновления этой же страницы, начинает проигрываться другая композиция, выбираемая в случайном порядке.
Скрипт воcпроизводит звуковые файлы в формате MIDI такие файлы имеют расширение .mid (.MID). Подборку музыкальных MIDI файлов Вы сможете скачать в прошлом уроке, а вообще-то на просторах Интернета таких музыкальных файлов навалом и совершенно бесплатно.
Теперь о том, как запустить скрипт на своём сайте.
Копируете код:
<SCRIPT LANGUAGE="JavaScript">
song = new Array(6);
title = new Array(6);
song[0] ='sound/0.mid'
song[1] ='sound/1.mid'
song[2] ='sound/2.mid'
song[3] ='sound/3.mid'
song[4] ='sound/4.mid'
song[5] ='sound/5.mid'
song[6] ='sound/6.mid'
title[0] = 'ДДТ Что такое осень'
title[1] = 'Любе Комбат'
title[2] = 'Машина времени Костер'
title[3] = 'Машина времени Марионетки'
title[4] = 'ДДТ Что такое осень'
title[5] = 'ДДТ Ветер'
title[6] = "ДДТ Последняя осень"
index = Math.floor(Math.random() * song.length);document.write("<DL>\n");
document.write("<EMBED SRC="+song[index]+" width=300 height=28 autostart=true loop=infinite");
/*width=300 height=28 размиры панели управления*/
document.write(' TEXT="#FFFFFF">');
document.write("<font face=arial>");
document.write(" ");
document.write("<font face=arial color=red>");
document.write(title[index]);
document.write("</font>")
document.write("</DL>\n");
</SCRIPT>
и вставляете в том месте, где Вы хотите видеть панель управления плеером. Но предварительно в этот код нужно внести некоторые изменения. В строках (цифрами):
song = new Array(6);
title = new Array(6);
указываете количество музыкальных композиций, причем обратите внимание, что нумерация начинается с 0, т.е. музыкальных файлов в данном случае 7, а указана цифра 6. Такая особенность скрипта, будьте внимательны!
Все звуковые файлы у меня лежат в папке sound. Нумеруете музыкальные файлы по порядку, начиная с 0 и т.д. Файлов может быть неограниченное количество. И прописываете путь до каждого файла вот таким образом:
song[0] ='sound/0.mid'
Если файлов больше, просто добавляете новые строки после строчки:
song[6] ='sound/6.mid'
следующая строка будет выглядеть вот так:
song[7] ='sound/7.mid'
и так далее.
Следующий шаг, в строках
title[0] = 'ДДТ Что такое осень'
прописываете название композиции, как Вы поняли в файле 0.mid находится композиция ДДТ Что такое осень. И так для каждого последующего файла. Соотвественно если Вы добавите еще музыкальные файлы, то этих строк тоже нужно будет добавить и дописать названия песен.
В строке:
document.write("<EMBED SRC="+song[index]+" width=300 height=28 autostart=true loop=infinite");
можно изменить размеры панели управления, в данном случае ширина указана 300 пикселей, а высота 28 пикселей.
В строке:
document.write("<font face=arial color=red>");
можно изменить шрифт и цвет шрифта, вывода названия песни.
После внесения всех корректив, сохраните отредактированную web-страницу и загрузите (обновите) на свой хостинг. Не забудьте туда же загрузить и звуковые файлы. Всё, радуйте своих посетителей.
Всего Вам доброго.
Читайте так же:
Заработать на Бирже Покупки и Продажи ссылок Sape.
Теги Ключевых слов Keywords и Описания web-страницы Description.
Сайт своими руками от А до Я. Пошаговый Обучающий Видео Курс.
Заработать!!! 2-х уровневая Партнерская программа.
Электронная книга: Отличный заработок. Бесплатная реклама. Вирусный трафик.
Что такое Cron и как с ним работать?
Просмотров: 19933
здравствуйте! На тестовой web-странице ничего нет кроме текста и сообщения firefox о том, что для отображения всего мультимедийного контента страницы требуются дополнительные плагины... то есть пользователь просто так со своего браузера не сможет слышать музыку???
Подходит только для браузеров, в которых установлен Quick Time плагин. В опере он по умолчанию не закачан. Еще проблема в кэше. При перезагрузки странице красным цветом пишет undifined
На iPad 2 так же не работает.
|