西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

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
})
Config itemMeaning
idPlayer container id
urlMusic resource url
nameSong name
posterThe poster of the album
volumeVolume
widthThe width of the music player
heightThe height of the music player

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();

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.

attributemeaningcomment
modeSpectrum indicator mode'bars'
sizerepresents the window size in samples that is used when performing a FFT to get frequency domain dataSee
statusWhether the spectrum indicator function is opened'on'

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();

Theme

xgplayer provides the default theme which sets the styles of the music player. You can develop your own theme with referring to the default theme. The method for developping and using the custom plugin is shown in Custom plugin. Here is one of the custom plugins which have been developped.