Войти / Регистрация
Войти в свою учетную запись
Запомнить меня
Создать учетную запись
Поля, отмеченные звездочкой (*), обязательны для заполнения.
Reload Captcha
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>