HTML5 Audio Player With Playlist And Lyric Support – cPlayer

Category: Javascript | October 30, 2018
Author:MoePlayer
Views Total:4,750 views
Official Page:Go to website
Last Update:October 30, 2018
License:MIT

Preview:

HTML5 Audio Player With Playlist And Lyric Support – cPlayer

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

You Might Be Interested In:


One thought on “HTML5 Audio Player With Playlist And Lyric Support – cPlayer

Leave a Reply