JavaScript Player

Скачайте и подключите к документу файл "audio.min.js"

Добавьте на странице элемент для плейлиста и укажите ID, например:

<div id="play_list"></div>
<script src="audio.min.js"></script>

Запустите функцию newPlayList(), как указано в описании ниже.

newPlayList(lists, params, ready, action, arg)

Создаёт аудио проигрыватели из списка треков (плейлист) или преобразовывает стандартные HTML5 проигрыватели, которые имеются на странице. В случае последнего варианта, аргумент lists должен содержать false, а в элементе с указанным ID, размещены элементы <audio>

<div id="play_list">
   <audio src="audio1.mp3"></audio>
   <audio src="audio2.mp3"></audio>
   ...
</div>

Проигрыватели состоят из HTML-элементов управления и области визуализации на js canvas, что видно из примера выше. Оформление внешнего вида (стилизация), задаётся в CSS файле.

 

В режиме плейлиста, функция обращается к отдельным файлам в формате JSON, перечень путей к которым, следует указать в аргументе lists, в виде массива или строки, где они перечисленны через запятую. Например:

newPlayList(["./audio/play-list1.json", "./audio/play-list2.json"]);
// или
newPlayList("./audio/play-list1.json, ./audio/play-list2.json");

Указанные JSON файлы со списками воспроизведения (плейлисты), должны находиться на веб-сервере и иметь следующую структуру:

{
   "title":"Название плейлиста",
   "description":"описание плейлиста",
   "cover":"audio/img/cover.jpg",
   "visualizer":"wave",
   "list":[
      {"src":"audio/mp3/audio1.mp3", "title":"Название трека 1", "description":"описание или исполнитель трека 1", "download":true, "color":"#626ab2", "cover":"audio/img/cover1.png"},
      {"src":"audio/mp3/audio2.mp3", "title":"Название трека 2", "description":"описание или исполнитель трека 2"},
      {"src":"audio/mp3/audio3.mp3", "title":"Название трека 3", "description":"описание или исполнитель трека 3"},
      {"src":"audio/mp3/audio4.mp3", "title":"Название трека 4", "description":"описание или исполнитель трека 4"},
      {"src":"audio/mp3/audio5.mp3", "title":"Название трека 5", "description":"описание или исполнитель трека 5"}
   ]
}

"visualizer" - тип визуализации для плейлиста, принимает значения: "wave", "eq" или false (не обязателен, по умолчанию: "eq");
"cover" - путь к изображению обложки плейлиста или для каждого трека (не обязателен);
"src" - путь к аудио файлу;
"color" - цвет фона проигрывателя для каждого трека (не обязателен);
"download" (true) - показать кнопку для скачивания аудио файла (не обязателен).

 

В аргумент params можно передать объект со следующими параметрами:

• params.id - ID элемента, в котором будет размещён плейлист c проигрывателями (строка);
• params.volume - Начальная громкость треков (число, по умолчанию: 0.9);
• params.FadeIn - Начинать воспроизведение с плавным увеличением громкости, от нуля и до значения в params.volume (false/true, а так же можно указать объект с параметрами: {time:4500, add:0.05}, где time - время в миллисекундах за которое будет увеличена громкость, add - шаг прибавления громкости);
• params.autoplay - Автоматическое воспроизведение последующих треков (false/true);
• params.loop - Повторять (зациклить) плейлист (false/true);
• params.random - Воспроизведение треков в случайном порядке (false/true);
• params.timer - Показывать обратное время воспроизведения трека, вместо прямого (false/true);
• params.visualizer - Тип визуализации. "wave" - волна, "eq" - эквалайзер, false - без визуализации ("wave"/"eq"/false);
• params.offsetTop - Верхний отступ в пикселях для автопрокрутки окна к следующему треку (число).

Следующие параметры служат для кастомизации значков на кнопках, в них можно указать HTML, SVG код, который будет помещён внутрь соответствующей кнопки:

• params.playIcon - Воспроизведение;
• params.stopIcon - Стоп;
• params.pauseIcon - Пауза;
• params.autoplayIcon - Автовоспроизведение последующих треков;
• params.loopIcon - Повторить;
• params.downloadIcon - Скачать;
• params.muteIcon - Без звука;
• params.volumeIcon - Громкость;
• params.randomIcon - В случайном порядке;
• params.repeatIcon - Повторять трек;
• params.nextIcon - Следующий трек;
• params.prevIcon - Предыдущий трек;
• params.timeIcon - Обратное время;
• params.clockIcon - Общее время;

Аргументы ready, action, arg необязательны и предназначены для функций обратного вызова, которые запускаются по соответствующим событиям. В аргумент arg, можно передать произвольное содержимое для функций обратного вызова и функций внутри них. Функция в аргументе ready вызывается в момент, когда весь плейлист готов к воспроизведению (построен HTML и произошла предзагрузка аудио файлов). Функция переданная в аргументе action, срабатывает при нажатии кнопок проигрывателей и передаёт параметры этих действий в пяти аргументах. Первый аргумент содержит объект кнопки (элемент), на который произошло нажатие. Второй - произвольное содержимое, которое может быть передано в другие функции из аргумента arg. В третьем аргументе будет содержаться объект с параметрами проигрывателя. В червёртый аргумент, передаётся тип действия в виде строки ("play"/"pause"/"download") Пятый - содержит объект события event. Пример:

var lists = ["./audio/play-list1.json", "./audio/play-list2.json"];
var params = {id:"play_list", autoplay:true};
var mydata = {foo:"value", bar:"value"}; /* Произвольное содержимое */

newPlayList(lists, params, 
   function(arg, prm) { /* Плейлист готов */

      console.log({action:"complete", argument:arg, params:prm});

   }, 
   function(elm, arg, prm, act, evt) { /* Действия: (action: play / pause / download) */

      console.log({element:elm, params:prm, argument:arg, action:act, event:evt});

   },
mydata);