RSS-лента

Скрипт: Фоновая музыка на сайте с панелью управления

Автор: Андрей Краснокутский

Дата: 2011-03-13

Как управлять музыкой на сайте.

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

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

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

Полностью код размещения скрипта на web-странице приведен в Листинге 1.

Листинг 1.

Музыка начинает проигрываться автоматически, сразу после загрузки 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 и как с ним работать?

Просмотров: 19010

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Добавить Ваш комментарий:

Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

ОХРАНА ТРУДА

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

С нами сделать сайт сможет даже Ребёнок! "Сайт от А до Я" Узнать сейчас >>> Хотите заработать? 2-х Уровневая Партнерская программа! Присоединяйтесь.

Последние заметки

Когда нужно пересматривать инструкции по Охране труда

Что должна содержать инструкция по охране труда?

Виды инструкций по Охране труда

Статистический отчет Форма № 7-травматизм "Сведения о травматизме на производстве и профессиональных заболеваниях"

Какие отчеты необходимо сдать Специалисту по охране труда за год

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT