# Music player

Now xgplayer supports music playback!

Fiddle

# Install and config

Music playback function can be installed and used with plugin, as follows.

import 'xgplayer';
import Music from 'xgplayer-music';

let player = new Music({
  id: 'vs',
  url: './audio.mp3',
  name: 'Westlife·My Love',
  poster: './poster.png',
  volume: 0.8,
  width: 900,
  height: 50,
  preloadNext: true,
  switchKeepProgress: false,
  abCycle: {
    start: 3,
    end: 9
  }
})

# Attributes

The associated parameters can be required with the attributes of the music player object.

# mode

• name: mode
• meaning: current playback mode, 'order' | 'random' | 'loop'

# Method

The associated operations can be done with the methods of the music player object.

# mode

• meaning: Set playback mode
• input: Number，0 is order, 1 is random, 2 is loop
• output: none
• example:

player.mode = 0; //order

# add

• meaning: Add a song to the playlist
• input: Object, object.src means the url of the song, object.name means the song name
• output: none
• example:

player.add({src:'url', name:'name'});

# remove

• meaning: Remove a song from the playlist
• input: String, the url of the removed song
• output: none
• example:

player.remove('url');

# random

• meaning: get the random song in the playlist
• input: none
• output: the song object, object.src means the url of the song, object.name means the song name
• example:

{src, name} = player.random();

# next

• meaning: Play the next song
• input: none
• output: none
• example:

player.next();

# prev

• meaning: Play the previous song
• input: none
• output: none
• example:

player.prev();

# forward

• meaning: fast forward timeScale second
• input: none
• output: none
• example:

player.forward();

# backward

• meaning: back forward timeScale second
• input: none
• output: none
• example:

player.backward();

# setAbCycle

• meaning: set AB Cycle
• input: AB cycle start and end poiont
• output: none
• example:

player.setAbCycle(start, end);

# removeAbCycle

• meaning: remove AB Cycle
• input: none
• output: none
• example:

player.removeAbCycle();

# Visual spectrum

xgplayer provides two kinds of visual spectrum indicator(bar and wave) with canvas element and Html5 AudioContext object. And you can read the xgplayer source code and develop the spectrum indicator with other styles. After instantiating the music player, the spectrum indicator can be required with player.analyze(canvasDom) method:

let an = player.analyze(document.querySelector('canvas'));

# Spectrum indicator attributes

The associated parameters can be required with the attributes of the spectrum indicator object.

# Spectrum indicator method

The associated operations can be done with the methods of the spectrum indicator object.

# mode

• meaning: Set spectrum indicator mode
• input: String, 'bars'(default) | 'wave'
• output: none
• example:

an.mode = 'wave';

# size

• meaning: Set the window size in samples that is used when performing a FFT to get frequency domain dataSee
• input: Number, must be a power of 2 between 32 and 32768.
• output: none
• example:

an.size = 256;

# Lyric

xgplayer provides the function that scrolling through the song lyric with existing DOM element container in the page. After instantiating the music player, the lyric text and container can be seted with player.lyric(lyricTxt, Dom) method:

let lyricText = `[00:00.00]Westlife - My Love\n[00:08.80]An empty street\n[00:10.51]An empty house\n[00:12.20]A hole inside my heart\n[00:15.47]I am all alone\n[00:17.27]The rooms are getting smaller\n[00:22.44]I wonder how\n[00:23.85]I wonder why\n[00:25.46]I wonder where they are\n[00:28.87]The days we had\n[00:30.50]The songs we sang together\n[00:33.32]Oh yeah\n[00:35.48]And oh my love\n[00:38.71]I am holding on forever\n[00:42.20]Reaching for a love that seems so far\n[00:48.07]So i say a little prayer\n[00:51.10]And hope my dreams will take me there\n[00:54.52]Where the skies are blue to see you once again, my love\n[01:01.23]Over seas and coast to coast\n[01:04.43]To find a place i love the most\n[01:07.83]Where the fields are green to see you once again, my love\n[01:18.73]I try to read\n[01:20.21]I go to work\n[01:21.90]I am laughing with my friends\n[01:25.18]But i cannot stop to keep myself from thinking\n[01:29.71]Oh no I wonder how\n[01:33.42]I wonder why\n[01:34.96]I wonder where they are\n[01:38.47]The days we had\n[01:40.15]The songs we sang together\n[01:42.90]Oh yeah And oh my love\n[01:48.30]I am holding on forever\n[01:51.76]Reaching for a love that seems so far Mark:\n[01:58.07][00:48.07]So i say a little prayer\n[02:01.40]And hope my dreams will take me there\n[02:04.80]Where the skies are blue to see you once again, my love\n[02:11.40]Over seas and coast to coast\n[02:14.72]To find a place i love the most\n[02:18.08]Where the fields are green to see you once again, my love\n[02:24.04]To hold you in my arms\n[02:27.29]To promise you my love\n[02:30.61]To tell you from the heart\n[02:33.87]You are all i am thinking of\n[02:45.46]I am reaching for a love that seems so far\n[02:51.94]So i say a little prayer\n[02:54.82]And hope my dreams will take me there\n[02:58.08]Where the skies are blue to see you once again, my love\n[03:04.70]Over seas and coast to coast\n[03:07.98]To find a place i love the most\n[03:11.52]Where the fields are green to see you once again,my love\n[03:19.00]Where the fields are green to see you once again,my love\n[03:31.58]Over seas and coast to coast\n[03:34.67]To find a place i love the most\n[03:38.11]Where the fields are green to see you once again,my love\n[03:19.02]say a little prayer\n[03:22.30]dreams will take me there\n[03:24.77]Where the skies are blue to see you once again\n`;

player.lyric (lyricText, document.querySelector('#gc'));
player.__lyric__.show();

# Lyric attributes

The associated parameters can be required with the attributes of the lyric object.

# interval

• name: interval
• meaning: the param controls the jump time between the lines of the lyric
• comment: default value is 0

# Lyric method

The associated operations can be done with the methods of the lyric object.

# interval

• meaning: set the param controls the jump time between the lines of the lyric
• input: Number, the unit is second
• output: none
• example:

player.__lyric__.interval = 0.1;

# adjust

• meaning: adjust the shown time of every lyric sentence and make it shown with the constant speed
• input: none
• output: none
• example:

player.__lyric__.adjust();

# find

• meaning: get the lyric sentences of the corresponding playback time
• input: Number, meaning the playback time(second)
• output: String array, the lyric sentences of the corresponding playback time
• example:

player.__lyric__.find(curTime);

# bind

• meaning: if the lyric format supports the dynamic show(means that every sentence of the lyric has the corresponding playback time in the lyric text), the lyric text will be bound with the music player(means supporting the dynamic show): every timeupdate event will trigger the lyricUpdate event which will return the lyric sentence of the current time.

• input: Object, the music player object

• output: Boolean, true means the lyric can be dynamically shown, false means the lyric format don't support dynamic show

• example:

player.__lyric__.bind(player);

# unbind

• meaning: unbind the music player with the lyric, which means delete the lyricUpdate event
• input: Object, the music player object
• output: none
• example:

player.__lyric__.unbind(player);

# show

• meaning: build the lyric elements in the DOM provided by player.lyric method and show
• input: none
• output: none
• example:

player.__lyric__.show();

# hide

• meaning: the lyric stops scrolling
• input: none
• output: none
• example:

player.__lyric__.hide();