Главная » (X)HTML, Flash, Добавляем на сайт » Установка flash(mp3)-плеера на сайт, часть 2 (плейлист)
Ноя
17

Установка flash(mp3)-плеера на сайт, часть 2 (плейлист)

Те, кто только попал на данный материал советую для прочесть первую часть — Установка flash(mp3)-плеера на сайт, часть 1

Давайте сразу рассмотрим те виды плееров которые имеют плейлисты. Это Vinyl+Playlist и просто Playlist. Так как они особо не отличаются в плане плайлиста, а только такими маленькими моментами как оформление и обложки к альбомам, то будем как пример рассматривать вариант плеера Vinyl+Playlist.

Установка на сайт

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

[html]
<object data="dewplayer-vinyl.swf" width="303" height="113" name="dewplayer" id="dewplayer" type="application/x-shockwave-flash">
<param name="movie" value="dewplayer-vinyl.swf" />
<param name="flashvars" value="xml=playlist.xml&javascript=off" />
<param name="wmode" value="transparent" />
</object>
[/html]

Теперь более подробно:
В первых двух строках где указан dewplayer-vinyl.swf как значение и как адрес, мы должны поменять на свой (адрес). К примеру мой файл .swf (флеш-плеер) находится не в корне сайта, а в папке music/dewplayer-vinyl.swf, тогда и адреса в коде должны выглядеть так:





[html]
<object data="music/dewplayer-vinyl.swf" width="303" height="113" name="dewplayer" id="dewplayer" type="application/x-shockwave-flash">
<param name="movie" value="music/dewplayer-vinyl.swf" />
</object>
[/html]

Думаю это понятно. Следующая строка указывает на плейлист (файл в формате .xml), в котором собственно и хранятся все данные.
Вот она:

[html]
<param name="flashvars" value="xml=playlist.xml&javascript=off" />
[/html]

Здесь с адресом все тоже самое (music/playlist.xml).
Больше здесь рассказывать нечего переходим к плейлисту (открывем файл playlist.xml).

Настраиваем плейлист

Смотрите как он выглядит на самом деле, и как он должен выглядеть у вас (много лишнего по умолчанию).
До

[xml]
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Ounage Playlist</title>
<creator>Dew</creator>
<link>http://www.blup.fr/</link>
<info>The Best Playlist</info>
<image>covers/0.jpg</image>

<trackList>

<track>
<location>mp3/test1.mp3</location>
<creator>Bedrich Smetana</creator>
<album>Má Vlast</album>
<title>La Moldau (Vltava)</title>
<annotation>I love this song</annotation>
<duration>32000</duration>
<image>covers/1.jpg</image>
<info></info>
<link>http://fr.wikipedia.org/wiki/M%C3%A1_Vlast_(Smetana)</link>
</track>

<track>
<location>mp3/test2.mp3</location>
<creator>Antonin Dvorak</creator>
<album>La Symphonie du Nouveau Monde</album>
<title>La Symphonie du Nouveau Monde</title>
<annotation></annotation>
<duration></duration>
<image>covers/2.jpg</image>
<info></info>
<link>http://fr.wikipedia.org/wiki/Cesaria_Evora</link>
</track>

<track>
<location>mp3/test3.mp3</location>
<creator>Jean-Claude Petit</creator>
<album>Le Hussard sur le Toit</album>
<title>Le Hussard sur le Toit</title>
<annotation></annotation>
<duration></duration>
<image>covers/3.jpg</image>
<info></info>
<link>http://fr.wikipedia.org/wiki/Le_Hussard_sur_le_toit_%28film%29</link>
</track>

</trackList>
</playlist>
[/xml]

После

[xml]
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Ounage Playlist</title>
<info>The Best Playlist</info>
<image>covers/0.jpg</image>

<trackList>

<track>
<location>mp3/test1.mp3</location>
<title>La Moldau (Vltava)</title>
<image>covers/1.jpg</image>
</track>

<track>
<location>mp3/test2.mp3</location>
<title>La Symphonie du Nouveau Monde</title>
<image>covers/2.jpg</image>
</track>

<track>
<location>mp3/test3.mp3</location>
<title>Le Hussard sur le Toit</title>
<image>covers/3.jpg</image>
</track>

</trackList>
</playlist>
[/xml]

Первые три параметра в начале полностью соответствуют начальному виду плеера:
Установка flash(mp3)-плеера на сайт, часть 2 (плейлист)

[xml]
<title>Ounage Playlist</title>
<info>The Best Playlist</info>
<image>covers/0.jpg</image>
[/xml]

А вот остальные параметры:

[xml]
<track>
<location>mp3/test3.mp3</location>
<title>Le Hussard sur le Toit</title>
<image>covers/3.jpg</image>
</track>
[/xml]

location — адрес к аудиозаписи;
title — имя;
image — обложка;

Замечу, что в типе плеера Playlist — image (обложка) можно удалить, как первых строках, так и в описании каждого трека.

Все что от вас дальше требуется, так это ваша личная настройка плейлиста. Создадите на компьютере файл playlist.xml первоначально, потом заполните его и киньте в корень сайта (или отдельную папку выделенную под этот плеер).
Что-то уж очень на долго затянулась наша беседа, чувствую что будет еще третяя чаcть по настройке самого флеш скрипта (.swf);

Результат:
Установка flash(mp3)-плеера на сайт, часть 2 (плейлист)

На этом все, если у вас есть вопросы — задавайте их в комментариях. Также подписывайтесь на новые материалы в форме ниже. Всем удачного дня!



Понравилась статья? Сделай приятно ее автору, поделись с друзьями:


Хотите получать обновления данного блога на EMail?

Введите адрес Почтового Ящика:




Подтвердите подписку в письме пришедшем на Почту, после чего начнете получить рассылку.