A simple and compact HTML5 bottom hover music player.
Demos: https://moeshin.github.io/QPlayer2/demos
Key | Type | Must |
---|---|---|
name | String | Yes |
artist | Array | String | No |
audio | URL | No |
cover | URL | No |
lyrics | LRC | No |
provider | Provider Name | No |
Make loading data more flexible.
Callback | Success param |
---|---|
audio | url, cache |
cover | url, cache |
lyrics | lrc |
/**
* @param {Object} current Current list item.
* @param {function} success See the table.
* @param {function} error No param and only audio is available.
*/
function callback(current, success, error) {}
You also can set them to true
to callback when loading.
/**
* @param {Object} current Current list item.
* @param {Object} callbacks
* {
* success: function(name, ...arguments) {},
* error: function(name) {}
* }
*/
function callback(current, callbacks) {}
window.QPlayer = $.extend(true, window.QPlayer, {
provider: {
example: {
lyrics: function(current, success) {
if (current.lrc) {
$.ajax({
url: current.lrc,
success: function(lrc) {
if (lrc) {
success(lrc);
}
}
});
}
}
}
},
list: [{
name: 'Hello World',
lrc: 'Hello World.lrc',
provider: 'example'
}]
});
window.QPlayer.list = [{
name: 'Hello World',
lrc: 'Hello World.lrc',
provider: 'example'
}];
window.QPlayer = $.extend(true, window.QPlayer, {
provider: {
example: {
load: function(current, callbacks) {
var name = current.name;
callbacks.success('audio', name + '.mp3');
callbacks.success('cover', name + '.png');
$.ajax({
url: name + '.lrc',
success: function(lrc) {
if (lrc) {
callbacks.success('lyrics', lrc);
}
}
});
}
}
}
});
window.QPlayer.list = [{
name: 'Hello World',
provider: 'example'
}];
You can set QPlayer.defaultProvider
to change default provider, default is default
.
If the list item has the lrc
property set and it is url
, will use ajax load it.
And you set QPlayer.provider.default.dataType
, default is *
, see jQuery.ajax() for details.
/**
* @param {Object|String} options A color or options.
*/
function setColor(options) {}
- all
- switch
- progress
- list
- lyrics
If all
is set, you can set options other to false
to filter.
It will be auto called with jQuery ready.
You can also call it after pjax.
load(index)
play(index, isPrevious)
next()
prevision()
isRotate
isShuffle
isAutoplay
isListNoHistory