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) {
console.log({element:elm, params:prm, argument:arg, action:act, event:evt});
},
mydata);