HTML5 Audio Player With Playlist And Lyric Support – cPlayer

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