Author: | MoePlayer |
---|---|
Views Total: | 5,230 views |
Official Page: | Go to website |
Last Update: | October 30, 2018 |
License: | MIT |
Preview:

Description:
The cPlayer library enables web developers to create a modern, customizable HTML5 audio player on the webpage.
Features:
- Playlist support.
- Lyric and sub lyric.
- Custom play mode: loop, single, random.
- Custom styles.
- Autoplay.
- Custom controls.
- Useful API and events.
How to use it:
Install and import the cPlayer into your project.
# NPM $ npm install cplayer --save
import cplayer from 'cplayer';
Or load the compiled version of the cPlayer library in the document.
<script src="/path/to/cplayer.js"></script>
Create a container to place the audio player.
<div id="app"></div>
Initialize the cPlayer and specify the playlist as follows:
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 } ] })
More customization options with default values.
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: when started
- ended: when stopped
- play: when playing
- pause: when paused
- playmodechange: when play mode is changed
- openaudio: when an audio is opened
- volumechange: when the volume is changed
- timeupdate: when the time is updated
how to save current playlist position and time to cookies then retreive in thenext session?