QPlayer2 一款简洁小巧的HTML5底部悬浮音乐播放器
QPLayer2
A simple and compact HTML5 bottom hover music player.
Demos: https://moeshin.github.io/QPlayer2/demos
List Item
Key | Type | Must |
---|---|---|
name | String | Yes |
artist | Array | String | No |
audio | URL | No |
cover | URL | No |
lyrics | LRC | No |
provider | Provider Name | No |
Provider
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) {}
Load
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) {}
Example 1: General callback
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'
}];
Example 2: Loading callback
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'
}];
Default Provider
You can set QPlayer.defaultProvider
to change default provider, default is default
.
QPlayer.provider.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.
QPlayer.setColor
/**
* @param {Object|String} options A color or options.
*/
function setColor(options) {}
Options
- all
- switch
- progress
- list
- lyrics
If all
is set, you can set options other to false
to filter.
QPlayer.init
It will be auto called with jQuery ready.
You can also call it after pjax.
Other Methods
load(index)
play(index, isPrevious)
next()
prevision()
Other Properties
isRotate
isShuffle
Related Projects
赏



支付宝红包

支付宝

微信
作者你好!请问一下如何设置音乐音量大小呢,感觉音乐声太大了
回复 @GoldenWater:
QPlayer.audio.volume
看了这么多评论感觉博主真得太有耐心了,爱了,而且我也喜欢Clannad,最喜欢的一部。
有个地方想请教一下博主,就是我使用typecho的插件配置的,但是使用代码
{"server": "netease", "type": "playlist", "id": "*"}
的时候无法加载动态歌单是怎么回事呢
回复 @Rakien:
好像可以了,得加个[]括起来,蚌埠住了
作者您好!已经将QPlayer2升级到了2.1.3版本,刚遇到一个新的问题,Qplayer2播放器在Safari浏览器中,播放列表会失效,无论是顺序播放还是随机播放,一首歌曲播放完成以后都不会自动开始播放列表中的下一首歌曲,有没有什么好办法能够解决?
回复 @知足常乐:
2.1.2 会有这个问题吗?
尊敬的作者您好!非常喜欢这款强大的mini播放器,请教一个问题,想做成动态更新歌单的播放器,就是动态的生成播放list,但是怎么样才能每次更新list播放器可以自动播放list中index为0的歌曲呢?就睡每次点击更新list按钮以后,播放器自动播放最新的一首歌曲,不胜感谢!
回复 @知足常乐:
更到 2.1.3
QPlayer.isListNoHistory = true;
回复 @MoeShin:
还有一个问题,国内用户无法访问github,有没有其他方式可以获取到QPlayer2.1.3最新版本呢?
回复 @知足常乐:
https://gitee.com/moeshin/QPlayer2
https://www.jsdelivr.com/package/gh/moeshin/QPlayer2
回复 @知足常乐:
已经找到了梯子,现在可以访问GitHub了。
回复 @MoeShin:
作者您好!多谢您的回复,按照您的指导,初始化加上了QPlayer.isListNoHistory = true;目前动态更新列表播放器可以显示正在播放的最新添加的歌曲信息,但是音乐实际播放的歌曲还是上一首的歌曲,也就是说只刷新了播放器显示的歌曲信息,但是歌曲并没有实际切换,怎么办呢?
回复 @知足常乐:
2.1.4 已修
你好,要关闭刷新续播,每次从头开始播放的代码是什么呢。
回复 @kay:
刷新不会续播吧