ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Аудио-плеер с плейлистом на HTML5

Аудио-плеер с плейлистом на HTML5

Аудио-плеер с плейлистом на HTML5
Вашему вниманию Аудио-плеер, который создан на основе HTML5, где вы можете поставить на сайт и пользователи слушать выбранную музыку. Если его разбирать, то он состоит из многих элементов как треки или автор, группы также присутствуют, но и обложка трека для красоты. Вы устанавливая его на интернет ресурс, можете его полностью использовать как в контейнере и в одном из него блока, также сделать специально под него информер. Безусловно на тематические сайты по музыке он отличное решение.

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

При открытие и выбора музыки:

Красивый музыкальный плеер


Рассмотрим особенности:

1. Легкий в использовании
2. Поддержка плейлиста
3. Изображение на заднем плане
4. Обложка альбома
5. Регулятор громкости
6. Функции для случайного и повторного воспроизведения композиций
7. Работает на всех популярных браузерах
8. Работает в Android и IOS

Если решите добавить свою композицию, то вам поставить в файл index.html, что предоставлен ниже.

Код
{  
  "title": "This Is What You Came For",  
  "author": "Calvin Harris",  
  "cover": "files/covers/2.jpg",  
  "background": "files/backgrounds/2.jpg",  
  "pfile": "files/music/2.mp3",  
  "duration": "221"  
},


Чтоб понять, что за какие формы отвечает.

"title": - Название композиции
"author": - Исполнитель
"cover": - Обложка альбома
"background": - Задний фон
"pfile": - Ссылка на .mp3 файл
"duration": - Продолжительность композиции в секундах.


Источник: art-ucoz.ru
22 Июня 2017 Загрузок: 222 Просмотров: 14756 Комментариев: (61)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 61
Зоэ
Зоэ 29 Января 2018 17:4711
0
А можно свою музыку вставить (к примеру 10)...этот код 10 раз повторить и вставить все что надо?!
Webmaster32
Webmaster32 29 Января 2018 20:2212
0
да 10 раз подряд нужно будет вставить данный код
Зоэ
Зоэ 30 Января 2018 15:2315
0
...не получилось...что вставила- то и вышло...только коды и мои тексты...
milan_shubin
milan_shubin 30 Января 2018 17:4017
0
Можно ссылку на сайт?)
waak
waak 30 Января 2018 21:2918
0
Не пойму а в чём проблема сделать плей лист чтобы он сам формировался из треков те что есть на сайте или треков конкретного пользователя как на всех сайтах типа соц сети или музыкальных сайтах
ulanov
ulanov 04 Февраля 2018 14:4119
0
Почему-то на андройде как только заканчивает играть трек, следующий не начинает проигрываться(
noavatar
mroea 07 Июня 2018 14:5021
0
У меня тоже самое. На компе в браузере все ОК, а на телефоне, когда заканчивается трек, следующий не играет... Решили эту проблему?
pavelgorbel87
pavelgorbel87 18 Августа 2020 10:3035
0
спустя два года отвечаю: решил) если поставить по умолчанию в коде, чтобы был рандом треков, то следующий проигрывается автоматически. Замените <div class="mplayer__random"></div> на <div class="mplayer__random mplayer__random-on"></div>
Kosten
Kosten 18 Августа 2020 23:1236
0
Лучше позже, чем не когда.)))
noavatar
vinograd 11 Марта 2018 08:5620
0
Отличный плеер, все отлично работает.
Могу помочь Вам с установкой.
BOBAS
BOBAS 22 Июня 2018 10:0822
0
Плеер работает, но не видит музыку указанную хотя путь верный! в чем проблема может быть ?
BOBAS
BOBAS 22 Июня 2018 12:2823
+1
В папке файл где находятся еще 2 папки с картинками не хватает папки music из-за которой путь не правильный становиться если смотреть по стандартным. Закиньте в архивы папку чтоб не было таких трат нервов )А так спс четкий плеер !
Kosten
Kosten 22 Июня 2018 14:5524
0
Не устанавливал плеер, а видел на Demo версий, но спасибо за информацию.
-SAM-
-SAM- 22 Июня 2018 22:2925
0
Там дело не в том, что путь неправильный, а в том, что демо-сайт уже недоступен, на котором файлы залиты были. Перед этим был выложен неполный плеер и "довеском" приходилось выкачивать mp3-композиции, что после я 4 стиля с демо-сайта снял был (до этого в архиве шёл всего один и без сопутствующей папки с шрифтами), а ссылки на музыкальные файлы через демо-сайт прописал. Кому нужен изначально выложенный файл, то вот ссылка на него. Ясное дело, что это всё для примера, ну вот основа и была залита на сайт, а что под себя делать нужно - уже за вами ход (свой плейлист подключать, где картинки и композиции свои).
DKV
DKV 24 Июня 2018 05:1626
+2
Автору мой нижайший поклон!!!! Написан очень хорошо! Я искал аудиоплеер часа четыре, всё унылый говнокод. Уже было смирился что придётся всё самому писать и изобретать велосипед, однако наткнулся на этот плеер. Он прекрасен! Автооспроизведение следующего файла при нажатии "далее", автовоспроизведение при нажатии на файл в плей листе, автовоспроизведение следующего файла при окончании текущего, всё красиво и аккуратно. Проверил на мобиле (браузер Firefox) всё работает. В общем спасибо человеку который писал и человеку который залил!
« 1 2 3 4 »
avatar