Главная » Flash, Добавляем на сайт, Интернет, Несанкционированный доступ » Установка flash(mp3)-плеера на сайт, часть 1
Ноя
03

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

Последнее время я начал все больше прислушиваться к постоянным читакам этого блога, и вот пару дней назад установил flash player (dewplayer). В моих планах (до установки) было найти бесплатный mp3 плеер и настроить его под себя.
Что в общем то я и сделал, прошу также заметить, что на плеере нету ни единого намека на авторов (в моем стиле как всегда не соблюдать авторские права). Но если исходный код открыт и плеер бесплатен, то почему бы и нет.
Кого заинтересовала установка и настройка, давайте продолжим.
Официальный разработчик этого плеера: http://www.alsacreations.fr/dewplayer.html, хотя бы здесь нужно сослаться :)
Скачиваете себе на компьютер исходные кода:

Теперь откройте index-xhtml.htm, а потом пересмотрите его исходный код, для наглядности я его предоставлю вам только то что нужно:




[html]
<h2>Classic</h2>

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=mp3/test1.mp3" width="200" height="20" id="dewplayer"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer.swf?mp3=mp3/test1.mp3" /></object>

<h2>Mini</h2>

<object type="application/x-shockwave-flash" data="dewplayer-mini.swf?mp3=mp3/test2.mp3" width="160" height="20" id="dewplayer-mini"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-mini.swf?mp3=mp3/test2.mp3" /></object>

<h2>Multi</h2>

<object type="application/x-shockwave-flash" data="dewplayer-multi.swf?mp3=mp3/test1.mp3|mp3/test2.mp3|mp3/test3.mp3" width="240" height="20" id="dewplayer-multi"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-multi.swf?mp3=mp3/test1.mp3|mp3/test2.mp3|mp3/test3.mp3" /></object>

<h2>Rect</h2>

<object type="application/x-shockwave-flash" data="dewplayer-rect.swf?mp3=mp3/test1.mp3|mp3/test2.mp3|mp3/test3.mp3" width="240" height="20" id="dewplayer-rect"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-rect.swf?mp3=mp3/test1.mp3|mp3/test2.mp3|mp3/test3.mp3" /></object>

[/html]

[html]

<h2>Vol</h2>

<object type="application/x-shockwave-flash" data="dewplayer-vol.swf?mp3=mp3/test1.mp3" width="240" height="20" id="dewplayer-vol"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-vol.swf?mp3=mp3/test1.mp3" /></object>

<h2>Bubble</h2>

<object data="dewplayer-bubble.swf" width="250" height="65" name="dewplayer" id="dewplayer" type="application/x-shockwave-flash">

<param name="movie" value="dewplayer-bubble.swf" />

<param name="flashvars" value="mp3=mp3/test1.mp3" />

<param name="wmode" value="transparent" />

</object>

<h2>Bubble+Vol</h2>

<object data="dewplayer-bubble-vol.swf" width="250" height="65" name="dewplayer" id="dewplayer" type="application/x-shockwave-flash">

<param name="movie" value="dewplayer-bubble-vol.swf" />

<param name="flashvars" value="mp3=mp3/test1.mp3" />

<param name="wmode" value="transparent" />

</object>

<h2>Playlist</h2>

<p class="hint">La playlist est stockée dans le fichier playlist.xml</p>

<p class="hint">The playlist is stored in playlist.xml</p>

<object type="application/x-shockwave-flash" data="dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer">

<param name="wmode" value="transparent" />

<param name="movie" value="dewplayer-playlist.swf" />

<param name="flashvars" value="showtime=true&autoreplay=true&xml=playlist.xml" />

</object>

<h2>Vinyl+Playlist</h2>

<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]

Все эти кода полностью соответствуют по порядку изображению:

Теперь ищите именно тот тип плеера который вас наибольше завлекает к употреблению и копируете его код. Например мне понравился плеер под названием: Vol, я нахожу его в исходном коде файла index-xhtml.htm

[html]
<object type="application/x-shockwave-flash" data="dewplayer-vol.swf?mp3=[АДРЕС ВАШЕГО ТРЕКА]" width="240" height="20" id="dewplayer-vol"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-vol.swf?mp3=[АДРЕС ВАШЕГО ТРЕКА]" /></object>
[/html]

[АДРЕС ВАШЕГО ТРЕКА] — вставляете адрес (пример: http://kpeople.ru/music/black/tom0rrow.mp3), думаю это понятно.

Если вы хотите вставить несколько треков для проигрования, то вводите адреса через знак | :

[html]
swf?mp3=[АДРЕС ВАШЕГО ТРЕКА 1]|[АДРЕС ВАШЕГО ТРЕКА 2]|[АДРЕС ВАШЕГО ТРЕКА 3]
[/html]

Как вы наверное заметили, в коде также находится адрес именно компонента (dewplayer-vol.swf) написанного на flash. если вы хотите вставить себе на сайт плеер, то dewplayer-vol.swf также должен присутствовать в корне сайта. Если же не в корне, а в любой другой папке, то адрес в коде придется поменять:

[html]
<object type="application/x-shockwave-flash" data="[ПАПКА]/dewplayer-vol.swf?mp3=[АДРЕС ВАШЕГО ТРЕКА]" width="240" height="20" id="dewplayer-vol">
[/html]

Также обратите внимание на сам файл dewplayer-vol.swf, если меня интересует плеер под названием Vol, то в корень сайта бросаем dewplayer-vol.swf, если любой другой, к примеру Multi, то бросаем flash-файл dewplayer-multi.swf. Э думаю это все очень логично и понятно всем.

Продолжением к данному материалу будет:

  • Установка и настройка плееров под названиями: Playlist и Vinyl+Playlist. Здесь все немного сложнее из-за существования плей листа в формате .xml, + указание обложек альбомов и корректных адресов аудиотреков.
  • Откорректировать используемые файлы формата .swf, поменяем линки, надписи и др. под себя. Сейчас когда плеер загружается то первые 2 сек. появляется надпись KPeople, а при клике на знак «?» вы попадете на эту статью. Также можете кликнуть правой кнопкой мыши на плеер, в разработчиках вы увидите мой ник и адрес моего сайта. Начнем разбирать язык flash.

На этом пока все! Чтобы не пропустить продолжение, подписывайтесь на новые материалы в форме ниже.
Если есть вопросы или что добавить, прошу высказаться в комментариях к данному материалу.

ПРОДОЛЖЕНИЕ: Установка flash(mp3)-плеера на сайт, часть 2 (плейлист)

Вечерний десерт



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


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

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




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