Reproductor de audio HTML5 personalizado con JavaScript-APlayer

Vista prévia

Descripción

APlayer es una biblioteca de JavaScript que le ayuda a generar una hermosa interfaz de usuario de audio HTML personalizable Jugarer con el mínimo esfuerzo.

¿Cómo funciona?

Descarga AJugarer e incluye APlayer. CSS & APlayer. js en la página HTML.

<link rel="stylesheet" href="APlayer.css">
<script src="APlayer.js"></script>

Cree un contenedor para el audio Jugarer.

<div id="Jugarer1" class="aJugarer">

Loading...
</div>

Cree una nueva instancia de AJugarer y especifique la fuente de audio que desea Wang.

var ap1 = new APlayer({


container: document.getElementById('Jugarer1'),


audio: {




name: 'Title',




artist: 'Author',




url: 'audio.mp3',




cover: 'poster.jpg'


}
});

Todas las opciones predeterminadas para personalizar el audio Jugarer.

{


// Jugarer container

container: document.querySelector('.aJugarer'),



// enable fixed mode

fixed: false,


// enable mini mode

mini: false,


// enable autoJugar

autoJugar: false,


// primary color

theme: '#b7daff',


// 'all', 'one', 'none'

loop: 'all',


// 'list', 'random'

order: 'list',


// 'none', 'metadata', 'auto'

preload: 'auto',


 // volume

volume: 0.7,


// audio info

audio: {


name: '', // audio name


artist: '', // audio artist


url: '', // audio url


cover: '', // audio cover


lrc: '', // lrc url


theme: '', // primary color


type: 'auto', // 'auto', 'hls', 'normal' or other custom type

}


// custom audio type

customAudioType:


 // prevent to Jugar multiple Jugarer at the same time

mutex: true,


// lrc type

lrcType: 0,


// indicate whether list should folded at first

listFolded: false,


 // max height of list

listMaxHeight: 0,


// localStorage key that store Jugarer setting

storageName: 'aJugarer-setting'

 }

Métodos de API disponibles.

// Jugar
ap1.Jugar();

// Pausa
ap1.Pausa();

// seek to
ap1.seek(time);

// toggle between Jugar and Pausa
ap1.toggle();

// bind events
ap1.on(event: string, handler: function);

// set volume
ap1.volume(percentage: number, nostorage: boolean);

// set theme
ap1.theme(color: string, index: number);

// set mode: 'mini' or 'normal'
ap1.setMode(mode: string);

// show notice message
ap1.notice(text: string, time: number, opacity: number);

// skip to previous
ap1.skipBack();

// goto next
ap1.skipForward();

// Destruir
ap1.Destruir();

// show lrc
ap1.lrc.show();

 // hide lrc
ap1.lrc.hide();

// toggle lrc between show and hide
ap1.lrc.toggle();

// show Jugar list
ap1.list.show();

// hide Jugar list
ap1.list.hide();

// toggle list between show and hide
ap1.list.toggle();

// add new audios to the list
ap1.list.add(audios: array | object);

// remove an audio from the list
ap1.list.remove(index: number);

// switch to an audio
ap1.list.switch(index)

// remove all audios from the list
ap1.list.clear();

// return current time
ap1.audio.currentTime();

 // return duration
ap1.audio.duration();


// return whether the audio is Pausad
ap1.audio.Pausad();

Controladores de eventos.

• Aborta
• puededesempeñar
• puededesempeñarthrough
• durationchange
• Vaciado
• Terminó
• Error
• loadeddata
• loadedmetadata
• loadstart Uninstall
• mozaudioavailable
• Pausa
• Jugar
• Jugaring
• Progreso
• reembolsablecambio
• buscado
• Buscando
• Estancado
• Suspender
• timeupdate
• volumechange
• Esperando
• listshow
• listhide
• listadd
• listremove
• listswitch
• listclear
• noticeshow
• notado
• Destruir
• lrcshow
• lrchide

ap.on('eventName', function () {

// do something
});

Registro de cambios

08/05/2018

• v1.10.1