29 мая 2009 г.

XSPF музыкальный плеер у себя на сайте


Вот загорелось мне сегодня сделать плеер у себя на сайте с музыкой из сериалов. Ни что, ни как не знаю... полезла разумеется в google...
Нашла сайт http://musicplayer.sourceforge.net/, вроде бы все понятно, создать плейлист, всунуть его в данный код, код всунуть на страницу. А вот не тут то было... Для HTML ламера как я это азбука Морзе. Поэтому сейчас, уже разобравшись, напишу все по порядку, может кому–то поможет.
1. Создание XSPF плейлиста:
– загрузить (или найти) музыку и интернет. Я загружаю все на www.fileden.com (нужна регистрация), можно и на FTP сервер, если место позволяет. Важно чтобы в названиях файлов не было пробелов, по какой–то причине не получалось с файлами, где были пробелы. Все пробелы заменила на "_" и все заработало, но пока я это выяснила прошло не мало времени. Так что убрать все пробелы.
– для дальнейшей работы нужны прямые ссылки на файл, типа http://www.xyz.com/qwerty.mp3. Для начала хватит пары песен, потом можно добавить.
– как я обнаружила, XSPF плейлист можно создать через VLC Player, но это долгий путь, и не все что в это плейлист вносит VLC вообще нужно, поэтому лучше написать плейлист самостоятельно. В первый раз легко не было, но как только поняла что к чему работа пошла.
– итак, выкладываю сюда свой исходник XSPF плейлиста, его нужно будет изменить под себя. В файле все подробно описано, что и как менять. Но прежде чем это делать нужно сделать еще кое–что (см. п.2).
– я на Mac'e редактировала файл ТехтЕdit'ом, в Windows'e можно блокнотом, главное чтобы расширение осталось .xspf.
2. Загрузка XSPF плеера с сайта http://musicplayer.sourceforge.net/, я себе взяла Extended version 0.2.3, и нужно загрузить его на FTP своего сайта (лучше прямо в папке).Туда же положить готовый плейлист (можно в ту же папку, можно в другую).
3. Вставка кода себе на страницу:
– перепробовав штук пять вариантов, заработал только этот, самый простой. Мне не удается вставить его сюда без его превращения в плеер :D, поэтому скопируйте его сами с сайта http://musicplayer.sourceforge.net/, он внизу после слов "Embeding the player on a HTML page".
Вместо http://yourdomain.com/xspf_player.swf указать url плеера на вашем сайте (домине); вместо http://yourdomain.com/playlist.xspf – url плейлиста; width – ширина плеера, height – высота.
Получившийся код вставляем на страницу, с помощью html-редактора, ну или html-виджета (на blogpost, например).
Плеер готов.

Еще одна статья о XSPF плеере (конкретно).

18 коммент.:

Анонимный комментирует...

Помогите пожалуйста! Не могу понять! Как добавить треки в плейлист(((

Unknown комментирует...

Чтобы добавить свои треки, сохраняете себе на компьютер исходник плейлиста (п.1), открываете текстовым редакторм (блокнотом например) вписываете в него названия и url-адреса песен в формате mp3 (предварительно загруженных куда-нибудь, например на www.fileden.com или свой ftp). Между тегами location вставляете url песни (например, http://www.pesnja-1.mp3), между тегами title – тазвание песни, между тегами image – url картунки к этой песне (например, http://www.kartinka-1.jpg). И так для каждого трека. Сохраняете как .xspf. Плейлист готов.

Анонимный комментирует...

А где исходник плейлиста взять?

Unknown комментирует...

http://www.fileden.com/files/2007/9/4/1407800/playlist_sample.xspf

Анонимный комментирует...

Все получилось! Спасибо! Если что еще обращусь)))))))))

Unknown комментирует...

Всегда пожалуйста! :)

Анонимный комментирует...

Почему когда стандартный (Extended version 0.2.3) плеер закидываешь на сайт Вконтакт в виде приложения, оно работает. Все воспроизводится.А когда я создаю свой плейлист, оно не работает. Когда тестирую на своем компьютере, все работает и воспроизвоится. В чем может быть проблема? Ведь стандартный ихний плейлист воспроизводиься Вконтакте???

Unknown комментирует...

Не могу ответить на этот вопрос, т.к. сервисом Вконтакте не пользуюсь, возможно могут помочь сотрудники сайта.

Анонимный комментирует...

Блин!!! Ну почему стандартный там работает, а мой нет!!! ((((

Unknown комментирует...

А он и не будет работать ВКонтакте, используйте стандартный плеер из Приложений :)

Анонимный комментирует...

Но стандартный же работает Вконтакте! Всмысле стандартный из приложений?

Unknown комментирует...

Стандартный скорее всего работает, а этот не будет, потому что его нужно загрузить на ftp-сервер своего сайта, туда же загрузить и плейлист :)

Анонимный комментирует...

я загружаю на свой сайт, созданный в системе ucoz.ru (бесплатный хостинг сайтов) Это не то?

Unknown комментирует...

Через ukoz.ru должно идти. А на самом сайте плеер работает?

Анонимный комментирует...

можете привести пример заполнения плайлиста?? что то не получаеться!! у меня (( образец без описания чтобы всё наглядно было!!у меня упорно не хочет его находить....а он работает на narod.ru??

Анонимный комментирует...

приведите пожалуйста полный код плеера и плайлиста!!!очень надо!!

Unknown комментирует...

Пример плейлиста (2 трека) тут:
http://dl.dropbox.com/u/5233443/mac-pig%20blog/xspf/playlist_example.xspf

Насчет narod.ru, к сожалению, не знаю.

Анонимный комментирует...

всё получилось спасибо огромное))))очень хороший плеер)) спасибо автору)))а возможно в этом плеере сделать несколько плайлистов ?? если возможно то можете привести пример скрипта)буду благодарен)

Отправить комментарий