HTML5 Audio Player With Playlist And Lyric Support – cPlayer

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