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
2017-06-22 Загрузок: 185 Просмотров: 12785 Комментарий: (41)

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

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

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

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