Custom HTML5 Audio Player with JavaScript – APlayer

Category: Javascript , Recommended | August 5, 2018
Author: DIYgod
Views Total: 4,209
Official Page: Go to website
Last Update: August 5, 2018
License: MIT

Preview:

Custom HTML5 Audio Player with JavaScript – APlayer

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

You Might Be Interested In:


Leave a Reply