AM AUDIO PLAYER
AM Audio Player
Создание шаблонов
Инициализация плеера
Для инициализации используется обязательный класс "jsAmap" с аттрибутом уникального идентификатора "data-amapid". В качестве уникального идентификатора используется MODULEID Joomla.
<div class="jsAmap" id="amap-MODULEID" data-amapid="MODULEID"></div>
Инициализация списка
<ul> <li class="jsAmap_item jsAmap_playlist_toggle" data-amap-index="" data-amap-title="Title" data-amap-artist="Artist" data-amap-album="Album" data-amap-audiosrc="/url/file.mp3" data-amap-imagesrc="/url/file.jpg" data-amap-type="file"> ... </ul>
Кнопка воспроизведения/паузы
Переключатель воспроизведения/паузы выбранного (текущего) трека.
<div class="jsAmap_play_toggle">PLAY</div>
При воспроизведении к элементу добавляется специальный css класс (по умолчанию: "jsAmap_playing").
Кнопки предыдущего/следующего трека
<div class="jsAmap_next">NEXT</div> <div class="jsAmap_prev">PREV</div>
Заголовок текущего трека
<div class="jsAmap_cur_title"></div>
Заголовок текущего трека и автора
<div class="jsAmap_cur_fulltitle"></div>
Имя артиста текущего трека
<div class="jsAmap_cur_artist"></div>
Название альбома текущего трека
<div class="jsAmap_cur_album"></div>
Изображение текущего трека
Обложка трека как элемент img.
<div class="jsAmap_cur_cover_img"></div>
Обложка трека как фон.
<div class="jsAmap_cur_cover_bg" style="background-size: cover; width: 200px; height: 200px;"></div>
Тип аудио файл или радио
<div> <div class="jsAmap_cur_type_f cur_type_f">File icon</div> <div class="jsAmap_cur_type_s cur_type_s">Stream icon</div> </div>
К активному типу будет добавлен специальный css класс (по умолчанию: "jsAmap_active")
.cur_type_f,
.cur_type_s{
display: none;
}
.cur_type_f.jsAmap_active,
.cur_type_s.jsAmap_active{
display: block;
}
Полоса воспроизведения
<div class="jsAmap_timeline timeline"> <div class="jsAmap_preload_bar preload_bar"></div> <div class="jsAmap_progress_bar progress_bar"></div> </div>
.timeline {
position: relative;
background: #eee;
}
.preload_bar{
background: #ccc;
width: 0px;
height: 6px;
transition: 0.3s;
}
.progress_bar{
position: absolute;
background: #9c27b0;
top: 0;
bottom: 0;
left: 0;
width: 0px;
height: 100%;
transition: 0.3s;
}
Полоса воспроизведения в виде волны
<div class="jsAmap_wave wave" data-amap-progress="true"></div>
.wave {
width: 100%;
height: 32px;
}
Управление громкостью
Горизонтальный ползунок
<div class="jsAmap_slider sHor" data-amap-slider="volume" data-amap-orientation="horizontal"> <div class="jsAmap_slider_value sHorVal"></div> <div class="jsAmap_slider_track sHorTrack"> <div class="jsAmap_slider_level sHorLev"></div> </div> </div>
.sHor{
display: inline-block;
padding: 10px;
background: #f2f2f2;
}
.sHorVal {
margin: 8px auto;
text-align: center;
}
.sHorTrack{
position: relative;
display: block;
width: 230px;
height: 8px;
margin: 14px auto;
background: #ddd;
border-radius: 8%;
overflow: hidden;
}
.sHorLev{
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: steelblue;
height: 100%;
}
Вертикальный ползунок
<div class="jsAmap_slider sVert" data-amap-slider="volume" data-amap-orientation="vertical"> <div class="jsAmap_slider_value sVertVal"></div> <div class="jsAmap_slider_track sVertTrack"> <div class="jsAmap_slider_level sVertLev"></div> </div> </div>
.sVert{
display: inline-block;
padding: 10px;
background: #f2f2f2;
}
.sVertVal {
margin: 8px auto;
text-align: center;
}
.sVertTrack{
position: relative;
display: block;
width: 8px;
height: 230px;
margin: 14px auto;
background: #ddd;
border-radius: 24%;
overflow: hidden;
}
.sVertLev{
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: steelblue;
height: 50%;
}
Кнопка приглушения звука
<div class="jsAmap_volume_mute">MUTE</div>
В активном состоянии добавляется специальный css класс (по умолчанию: "jsAmap_muted").
Текущее время воспроизведения
<div class="jsAmap_current_time"></div>
Общее время текущего трека
<div class="jsAmap_duration_time"></div>
Управления порядком воспроизведения списка
<div class="jsAmap_order"> <div class="jsAmap_order_i order_i" data-amap-order="repeat">Repeat</div> <div class="jsAmap_order_i order_i" data-amap-order="repeatone">Repeat one</div> <div class="jsAmap_order_i order_i" data-amap-order="shuffle">Shuffle</div> </div>
К активному порядку будет добавлен специальный css класс (по умолчанию: "jsAmap_active")
.order_i {
display: none;
width: 100px;
background: steelblue;
color: white;
padding: 4px 10px;
}
.order_i.jsAmap_active {
display: block;
}
Анализатор
// SINE <div class="jsAmap_analyser analyser" data-amap-type="sine" data-amap-fft="2048" data-amap-linewidth="2" data-amap-linecolor="#cccccc"></div> // FREQUENCY <div class="jsAmap_analyser analyser" data-amap-type="freq" data-amap-fft="2048"></div>
.analyser {
width: 100%;
height: 150px;
}
Эквалайзер
Усиление
<div class="jsAmap_slider sVert" data-amap-slider="gain" data-amap-default="1" data-amap-orientation="vertical"> <div class="jsAmap_slider_value sVertVal"></div> <div class="jsAmap_slider_track sVertTrack"> <div class="jsAmap_slider_level sVertLev"></div> </div> </div>
Слайдер эквализации
<div class="jsAmap_filter" data-amap-type="lowshelf" data-amap-frequency="100" data-amap-q="1" data-amap-gain="9"> <!-- Frequency --> <div class="jsAmap_slider sVert" data-amap-slider="filter" data-amap-type="frequency" data-amap-min="0" data-amap-max="180" data-amap-orientation="vertical"> <div class="jsAmap_slider_value sVertVal"></div> <div class="jsAmap_slider_track sVertTrack"> <div class="jsAmap_slider_level sVertLev"></div> </div> </div> <!-- Q --> <div class="jsAmap_slider sVert" data-amap-slider="filter" data-amap-type="q" data-amap-min="0.1" data-amap-max="40" data-amap-orientation="vertical"> <div class="jsAmap_slider_value sVertVal"></div> <div class="jsAmap_slider_track sVertTrack"> <div class="jsAmap_slider_level sVertLev"></div> </div> </div> <!-- Gain --> <div class="jsAmap_slider sVert" data-amap-slider="filter" data-amap-type="gain" data-amap-max="12" data-amap-orientation="vertical"> <div class="jsAmap_slider_value sVertVal"></div> <div class="jsAmap_slider_track sVertTrack"> <div class="jsAmap_slider_level sVertLev"></div> </div> </div> </div>
.sVert{
display: inline-block;
padding: 10px;
background: #f2f2f2;
}
.sVertVal {
margin: 8px auto;
text-align: center;
}
.sVertTrack{
position: relative;
display: block;
width: 8px;
height: 230px;
margin: 14px auto;
background: #ddd;
border-radius: 24%;
overflow: hidden;
}
.sVertLev{
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: steelblue;
height: 50%;
}
Предустановки эквалайзера
Предустановки эквалайзера - это пресеты позволяющие быстро изменять предворительно заложеные настройки эквалайзера.
По умолчанию в AMAudioPlayer заложены пресеты для десятиполосного эквалайзера. При использовании слайдеров вместе с пресетами, во избежание ошибок убедитесь в наличии десяти соответствующих полос эквалайзера. Допускается использование пресетов без использования полосного эквалайзера. Для изменения стандартных пресетов, например для возможности использования 3-х, 4-х или другого количества полос эквалайзера, необходимо задать собственные предустановки в соответстии с вашим эквалайхером.
Стандартный набор пресетов для 10-ти полосного эквалайзера.
<div class="jsAmap_f_preset" data-amap-type="btn"> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="default">DEFAULT</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="custom">CUSTOM</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="classic">CLASSIC</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="club">CLUB</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="dance">DANCE</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="bass">BASS</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="basstreble">BASS & TREBLE</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="treble">TREBLE</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="laptop">LAPTOP</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="hall">HALL</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="live">LIVE</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="party">PARTY</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="pop">POP</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="reggae">REGGAE</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="rock">ROCK</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="ska">SKA</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="soft">SOFT</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="softrock">SOFT ROCK</div> <div class="jsAmap_f_preset_i preset_i" data-amap-preset="techno">TECHNO</div> </div>
К активному пресету будет добавлен специальный css класс (по умолчанию: "jsAmap_active")
.preset_i {
display: none;
cursor: pointer;
}
.preset_i.jsAmap_active {
display: block;
}
Скачивание файлов
<ul> <li class="jsAmap_item jsAmap_playlist_toggle" data-amap-index="" data-amap-title="Title" data-amap-artist="Artist" data-amap-album="Album" data-amap-audiosrc="/url/file.mp3" data-amap-imagesrc="/url/file.jpg" data-amap-type="file"> <div>Title</div> <div class="jsAmap_download">Download inside the list.</div> </li> <div class="jsAmap_download" data-amap-audiosrc="/url/file.mp3" data-amap-title="Title">Download outside the list.</div> </ul>
