Reproductor de audio HTML5 con lista de reproducción y soporte Lyric-cPlayer

Vista prévia

Descripción

La biblioteca de cPlayer permite a los desarrolladores web crear un reproductor de audio HTML5 moderno y personalizable en la Página Web.

Características

• Compatibilidad con listas de reproducción.
• Lírica y sub lírica.
• Modo de juego personalizado: bucle, único, aleatorio.
• Estilos personalizados.
• Autoplay.
• Controles personalizados.
• API y eventos útiles.

Funcionamiento

Instale e importe el cPlayer en su proyecto.

# NPM
$ npm install cplayer --save

import cplayer from 'cplayer';

O cargue la versión compilada de la biblioteca de cPlayer en el documento.

<script src="/path/to/cplayer.js"></script>

Cree un contenedor para colocar el reproductor de audio.

<div id="app"></div>

Inicialice el cPlayer y especifique la lista de reproducción de la siguiente manera:

let myPlayer = new cplayer({


element: document.getElementById('app'),


playlist: [



{




src: 'audio file',




poster: 'poster file',




name: 'audio name',




artist: 'artist',




lyric: 'lyric',




sublyric: 'sub lyric',




album: 'album'



},



{




// more audios here



}


]
})

Más opciones de personalización con valores predeterminados.

let myPlayer = new cplayer({



// optimize for Japanese


zoomOutKana: false,



// or 'singlecycle', 'listrandom'


playmode: 'listloop',



// initial volume


volume: 1,



// initial audio


point: 0,



// shows playlist


showPlaylist: false,



// autoplay


autoplay: false,



// player size


width: '',


size: 12px,



// additonal CSS styles


style: '',



// shows playlist button


showPlaylistButton: 'true',



// or 'top', 'none'


dropDownMenuMode
'bottom'



})

API methods.

// sets play mode
myPlayer.mode

// sets volume
 myPlayer.volume

// toggles play mode
myPlayer.toggleMode()

// sets play mode
myPlayer.setMode(playmode: string)

// gets play mode
myPlayer.getMode()

// play
myPlayer.play()

// pause
myPlayer.pause()

// jump to
myPlayer.to(id: number)

// goto next
myPlayer.next()

// back to prev
myPlayer.prev()

// toggles play state
myPlayer.togglePlayState()

// add sa new audio
myPlayer.add(item: IAudioItem)

// removes an audio
myPlayer.remove(item: IAudioItem)

// sets volum
myPlayer.setVolume()

// destroy the audio player
myPlayer.destroy()

// gets <c-player /> element
myPlayer.view.getRootElement()

// shows audio info
myPlayer.view.showInfo()

// shows playlist
myPlayer.view.showPlaylist()

// toggles dropdown menu
myPlayer.view.toggleDropDownMenu()

Event handlers.

• Started: cuando se inicia
• finalizado: cuando se detuvo
• Play: al reproducir
• PAUSE: cuando se pausa
• playmodechange: cuando se cambia el modo de reproducción
• openaudio: cuando se abre un audio
• volumechange: cuando se cambia el volumen
• timeupdate: cuando se actualiza el tiempo