Custom HTML5 Audio Player with JavaScript – APlayer

Preview:

Description:

APlayer is a JavaScript library which helps you generate a beautiful, customizable HTML audio player UI with minimal effort.

Basic usage:

Download Aplayer and include the APlayer.css & APlayer.js in the html page.

<link rel="stylesheet" href="APlayer.css">
<script src="APlayer.js"></script>

Create a container for the audio player.

<div id="player1" class="aplayer">
  Loading...
</div>

Create a new Aplayer instance and specify the audio source you want to play.

var ap1 = new APlayer({
    container: document.getElementById('player1'),
    audio: {
        name: 'Title',
        artist: 'Author',
        url: 'audio.mp3',
        cover: 'poster.jpg'
    }
});

All default options to customize the audio player.

{
  // player container
  container: document.querySelector('.aplayer'),  
  // enable fixed mode
  fixed: false,
  // enable mini mode
  mini: false,
  // enable autoplay
  autoplay: false,
  // primary color
  theme: '#b7daff',
  // 'all', 'one', 'none'
  loop: 'all',
  // 'list', 'random'
  order: 'list',
  // 'none', 'metadata', 'auto'
  preload: 'auto', 
  // volume
  volume: 0.7,
  // audio info
  audio: {
    name: '', // audio name
    artist: '', // audio artist
    url: '', // audio url
    cover: '', // audio cover
    lrc: '', // lrc url
    theme: '', // primary color
    type: 'auto', // 'auto', 'hls', 'normal' or other custom type
  }
  // custom audio type
  customAudioType: 
  // prevent to play multiple player at the same time
  mutex: true,
  // lrc type
  lrcType: 0,
  // indicate whether list should folded at first
  listFolded: false, 
  // max height of list
  listMaxHeight: 0,
  // localStorage key that store player setting
  storageName: 'aplayer-setting' 
}

API methods available.

// play
ap1.play();
// pause
ap1.pause();
// seek to
ap1.seek(time);
// toggle between play and pause
ap1.toggle();
// bind events
ap1.on(event: string, handler: function);
// set volume
ap1.volume(percentage: number, nostorage: boolean);
// set theme
ap1.theme(color: string, index: number);
// set mode: 'mini' or 'normal'
ap1.setMode(mode: string);
// show notice message
ap1.notice(text: string, time: number, opacity: number);
// skip to previous
ap1.skipBack();
// goto next
ap1.skipForward();
// destroy
ap1.destroy();
// show lrc
ap1.lrc.show(); 
// hide lrc
ap1.lrc.hide();
// toggle lrc between show and hide
ap1.lrc.toggle();
// show play list
ap1.list.show();
// hide play list
ap1.list.hide();
// toggle list between show and hide
ap1.list.toggle();
// add new audios to the list
ap1.list.add(audios: array | object);
// remove an audio from the list
ap1.list.remove(index: number);
// switch to an audio
ap1.list.switch(index)
// remove all audios from the list
ap1.list.clear();
// return current time
ap1.audio.currentTime(); 
// return duration
ap1.audio.duration();  
// return whether the audio is paused
ap1.audio.paused();

Event handlers.

• abort
• canplay
• canplaythrough
• durationchange
• emptied
• ended
• error
• loadeddata
• loadedmetadata
• loadstart
• mozaudioavailable
• pause
• play
• playing
• progress
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• volumechange
• waiting
• listshow
• listhide
• listadd
• listremove
• listswitch
• listclear
• noticeshow
• noticehide
• destroy
• lrcshow
• lrchide

ap.on('eventName', function () {
  // do something
});

Changelog:

08/05/2018

• v1.10.1