Recent Posts

Home › bLOGGER help desk › HTML widgets › music player › tech

Aplayer - How to create or make a beautiful web based lyrics enabled music player

Saturday, March 28, 2020
APlayer is a lovely HTML5 music player to help people build audio easily.
You may find the repository here: https://github.com/MoePlayer/APlayer

What Will I Learn?

  • How to build a simple HTML page
  • How to use APlayer for sync lyrics display
  • You will learn what LRC file format is

Requirements

  • Basic HTML knowledge
  • Basic JavaScript knowledge
  • Known of Json is better

Difficulty

  • Basic

Tutorial Contents

1 . We need a basic HTML page:
<html>
  <head>
    <title>APlayer demo page</title>
  </head>
  <body></body>
</html>


2 . Structure and implement JavaScript file
Insert following codes between body tags.
<div id="myplayer" class="aplayer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.6.0/APlayer.min.js"></script>
Tips:
  • The id: myplayer is important, we will use it to locate the player element.
  • We use a cdn js URL instead of local file.
  • No additional CSS file required for the player


3 . Make the player alive!
Insert the following codes under script tags.
var ap = new APlayer({
    element: document.getElementById('myplayer'),
    music: {
        title: 'Heal the world',
        author: 'Michael Jackson',
        url: 'HealTheWorld.mp3',
    }
});
Tips:
  • You may noticed we use myplayer to locate the player element
  • The option url is where the music file placed, in this case the mp3 file is in the same directory of this HTML file
So far, if the music file url is correct, the player will come alive with music playing. Even if you have an invalid url the player will display anyway.

4 . What's more
There are many more options to make APlayer more powerful.
var ap = new APlayer({
    element: document.getElementById('myplayer'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: true,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 0,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    mode: 'random',                                                    // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    listmaxheight: '513px',                                             // Optional, max height of play list
    music: {                                                           // Required, music info, see: ###With playlist
        title: 'Preparation',                                          // Required, music title
        author: 'Hans Zimmer/Richard Harvey',                          // Required, music author
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',  // Required, music url
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg',  // Optional, music picture
        lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'                   // Optional, lrc, see: ###With lrc
    }
});
It can be easily understood from the comments. I'd like to introduce on the lrc option.
With lrc, APlayer will show sync lyrics while music is playing.

 What is lrc?
LRC is a dymantic lyric format used to display sync lyric for music players. With a time tag `[mm:ss.xx] at the beginning of each line, the lyric would match play duation to sync. The basic structure is as following.
[00:00.00]line 0: you can put music title and other information here
[00:01.10]line 1: lyric content
[00:03.32]line 2: lyric content
We have three ways to pass LRC to APlayer, indicate the way to pass LRC by option `lrcType`, then put lrc to option, `audio.lrc` or HTML.
APlayer can load LRC lyric in 3 ways: js (as the example), HTML or url to lrc file.


The first way, put LRC to a LRC file, LRC file will be loaded when this audio start to play.
the music option as:
 const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 3,
    audio: {
        name: 'name',
        artist: 'artist',
        url: 'demo.mp3',
        cover: 'demo.jpg',
        lrc: 'lrc.lrc'
    }
});

The second way, put LRC to a JS string.
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    lrcType: 3,
    audio: {
        name: 'name',
        artist: 'artist',
        url: 'demo.mp3',
        cover: 'demo.jpg',
        lrc: '[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing'
    }
});

The third way, put LRC to HTML.

    <div id="player">
    <pre class="aplayer-lrc-content">
        [00:00.00]APlayer audio1
        [00:04.01]is
        [00:08.02]amazing
        <!-- ... -->
    </pre>
    <pre class="aplayer-lrc-content">
        [00:00.00]APlayer audio2
        [00:04.01]is
        [00:08.02]amazing
        <!-- ... -->
    </pre>
</div>

if you want to use APlayer with multiple music playlist, you may set the music option as:
music: [
    {
        title: '',
        author: '',
        url: '',
        pic: ''
    },
    {
        title: '',
        author: '',
        url: '',
        pic: ''
    },
    ...

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)