Плеер для сайта с плейлистом – итак, мы подошли с Вами к следующей ступеньке добавления на страницы Ваших сайтов плеера. В этом уроке, мы рассмотрим, как установить на сайт плеер с плейлистом.

Плейлист, добавленный к плееру, позволяет предоставить посетителю Вашего сайта, возможность выбирать из  списка плейлиста  любой mp3 аудиофайл, который в данном плейлисте представлен.

Внешне плеер для сайта с плейлистом выглядит как обычный плеер, но рядом с плеером или прямо в самом плеере, добавляется окно, в котором идет перечень доступных для прослушивания mp3 файлов.

Посетитель сайта, кликая курсором мышки в элементы списка, тем самым запускает воспроизведение того или иного аудио mp3 трека.

Давайте посмотрим, как, с помощью html кода может быть реализована задача добавления на страницу плеера с плейлистом.

Вот первый, достаточно простой вариант, создан на базе плеера от flash-mp3-player.net.

Итак, давайте сразу начнем с практики.  Сначала создадим на диске рабочую папку, например, вот такую -  C:\playlist.

В эту папку скопируем три mp3 аудио записи и сюда же добавим html файл, например с именем index.html:

Добавим в файл index.html следующий код:

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

Теперь, откроем браузером файл index.html. Как видите, перед нами открылся плеер с плейлистом:

Кликая по названиям mp3 треков, мы можем запускать на воспроизведение любой из представленных в списке плейлиста.

Давайте последовательно посмотрим, как это работает данный html код.

Итак, строкой:

Браузеру объявляется, что необходимо отобразить внешний flash объект,  тип объекта указан параметром type.

Сам объект расположен по адресу data="player_mp3.swf", размеры объекта – ширина 200 пикселей, высота 100 пикселей.

Вот с такими основными параметрами открывается тег object.

Теперь давайте рассмотрим, какие дополнительные параметры, передаются браузеру данным кодом. Мы знаем, что дополнительные параметры браузеру передаются с помощью тегов  param.

И далее, через вертикальную линию, идет перечень mp3 аудио файлов, которые и составляют плейлист.

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

В данном примере, работать с плейлистом не очень удобно, так как его редактирование, приходиться производить непосредственно в html коде.

Неоспоримым преимуществом данного проигрывателя является его простота.

Автор: Виктор Милованов