MP3 плеер для сайта

MP3 плеер для сайта

32016-12-23699412Денис Абдуллин

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

Плеер отлично подойдет для других систем, можно просто сделать статичную HTML страницу, просто здесь у нас есть пояснение того, как установить на кнопку воспроизведения в виде материалов скрипт. Заметьте, скрипт не подразумевает полный модуль, вид материалов вам нужно будет продумывать самостоятельно (ну, или скопировать исходный код из демо).

Установка

1. Скачайте архив и загрузите папку «Player» в корень сайта. Для этого используйте FTP или стандартный Файловый менеджер.

2. Сразу после <body> вставьте следующий код:

Код
<script type="text/javascript" src="/player/playerAPI.js"></script>
<script type="text/javascript" src="/player/cookie.js"></script>
<script type="text/javascript" src="/player/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/player/jquery-ui.js"></script>

3. Добавьте строки в Таблицу стилей (CSS):

Код
@import url('/player/player.css') all;
@import url('/player/jquery-ui.css') all;

4. Прямо перед закрывающим тегом </body> вставляйте следующий код:

Код
<div id="SwfPlayerv" class="bodyBottons"></div><div id="Modal" align="center"></div>
<script type="text/javascript" src="/player/addons1.0.js"></script>

5. Добавьте в кнопку воспроизведения код:

Код
id="Player$ID$" onclick="Player('<?substr($TITLE$,0,32)?>...','$RFILE_DIRECT_URL$','$ID$','$ENTRY_URL$','$AUTHOR_SITE$')"

$RFILE_DIRECT_URL$ - ссылка на MP3

$AUTHOR_SITE$ - ссылка на обложку

Специально для вас я сделал свою версию демо для этого великолепного скрипта. Надеюсь, что моя подборка из восьми треков понравится.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (12)
Сергей 2014-11-03 в 19:05 / МатериалСпам
Ссылка битая.
0
Гость 2013-07-26 в 21:06 / МатериалСпам
Как понять "Кнопка воспроизведения"?
0
Юлия 2013-07-19 в 08:30 / МатериалСпам
Помогите кто нибудь. Установила работает, а изменить дизайн не могу. не открывает окно с дизайном.((((
0
Гость 2013-05-21 в 11:26 / МатериалСпам
2. Сразу после <body> вставьте следующий код: этого откуда можно найти?
0
Рома 2013-03-08 в 17:34 / МатериалСпам
Ребят, ничего не менял - все кнопки прибиты к низу, а не по центру, как в демо. В чем дело? При попытке поднять через position:relative - глючит в Опере. Беда, не могу разобраться, выручайте
0
Вадим Голубь 2013-02-14 в 22:21 / МатериалСпам
Норм
0
ilhom 2013-01-31 в 19:23 / МатериалСпам
как сделать вид как у вас на демо сайта дайты коды
0
ilhom 2013-01-31 в 19:54 / МатериалСпам
взял от туда не работает и плеер и вид не такое как там
1
Илья Дементьев 2013-01-25 в 18:26 / МатериалСпам
Да, тут на любую cms можно за минуту переделать.
0
Алексей Королёв 2013-01-23 в 19:59 / МатериалСпам
такую бы штуку под dle и прекрасно было
0
Денис Абдуллин 2013-01-23 в 20:20 / МатериалСпам
alexmensv, легко использовать это на любом сайте, даже на WP
0
Dmitriy Yakovenko 2017-03-09 в 20:32 / МатериалСпам
Спасибо!!! все работает без проблем.
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.