HTML5 Audio Player With Playlist And Lyric Support – cPlayer

Category: Javascript | October 30, 2018
Author: MoePlayer
Views Total: 595
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:


Leave a Reply