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
isRotateisShuffle
希望大佬开发一下wordpress插件！谢谢啦！
回复 @松鼠小：
https://github.com/moeshin/QPlayer2-WordPress
回复 @MoeShin：
哈哈,似乎我这边有点小问题,具体看链接https://pic.baixiongz.com/2020/06/27/eef6c8f8127d9.png
回复 @阁主博客：
我适配的是最新版的，应该不会差太多
回复 @MoeShin：
需要自己去改一下版本
回复 @MoeShin：
太棒了！谢谢博主啦(๑‾ ꇴ ‾๑)
这插件不错,改天有空也放我博客上.谢谢分享!
回复 @阁主博客：
https://github.com/moeshin/QPlayer2-ZBlog
您好，Qplayer网易云似乎无法使用了
回复 @small_xu：
可以的，下载源码包使用 meto.html 中的 demo，可以参考我的，我已经改完了，感谢作者辛苦付出。
您好，感谢您的辛苦付出。现在是不是不能直接使用网易云歌单了？
回复 @哈喽沃德先生：
搞定了，现在是每首歌单独去取网易歌曲ID。
回复 @哈喽沃德先生：
- - 尴尬了，meto 模式可以直接获取。
请问一下怎么修改头像？
回复 @啊啊啊啊：
Gravatar 还是？
回复 @MoeShin：
不能发照片我也说不清楚
博主，这个插件库能设置WordPress全局音乐播放吗，现在添加到WordPress网站中，做一个页面跳转音乐就停掉了。
回复 @轻声说：
有链接吗，我看看什么情况
请问如何实现音乐的自动播放呢？
回复 @松鼠小：
QPlayer.isAutoplay = true
https://github.com/moeshin/QPlayer2-Typecho/issues/2#issuecomment-783670024
普通的php或html页面不是博客 怎么使用这款播放器啊
回复 @okok：
引入 js 和 css，然后 window.QPlayer.list 设置歌曲，可以看看这几个 Demo：https://github.com/moeshin/QPlayer2/tree/master/demos
回复 @MoeShin：
可以有简单点的 引用css和js后 直接输入网易云自己创建的歌单ID就可以的吗
回复 @okok：
https://github.com/moeshin/QPlayer2/blob/master/demos/meto.html
需要这个这个 js：provider/meto.js
QPlayer.provider.meto.playlist(function (list) {
QPlayer.list = list;
}, '3136952023');
3136952023 这个是私人雷达的歌单，换成其他的也行哦
回复 @MoeShin：
真不好意思可以加你QQ下吗 真的太笨了QPlayer.provider.meto.playlist(function (list) {QPlayer.list = list;
}, '3136952023');这段就没搞明白放哪里。。。
回复 @MoeShin：
在请教一下 如何设置打开页面默认播放器是在收缩状态 不想让她展开
回复 @okok：
默认就是不展开的，你应该是抄了 demos/script.js，这个这只是为了演示而展开。
QPlayer-show：显示面板
QPlayer-list-show：显示歌单
QPlayer-lyrics-show：显示歌词
回复 @MoeShin：
非常感谢你的回答我是小白，在慢慢研究研究谢谢你好，要关闭刷新续播，每次从头开始播放的代码是什么呢。
回复 @kay：
刷新不会续播吧
尊敬的作者您好！非常喜欢这款强大的mini播放器，请教一个问题，想做成动态更新歌单的播放器，就是动态的生成播放list，但是怎么样才能每次更新list播放器可以自动播放list中index为0的歌曲呢？就睡每次点击更新list按钮以后，播放器自动播放最新的一首歌曲，不胜感谢！
回复 @知足常乐：
更到 2.1.3
QPlayer.isListNoHistory = true;
回复 @MoeShin：
作者您好！多谢您的回复，按照您的指导，初始化加上了QPlayer.isListNoHistory = true;目前动态更新列表播放器可以显示正在播放的最新添加的歌曲信息，但是音乐实际播放的歌曲还是上一首的歌曲，也就是说只刷新了播放器显示的歌曲信息，但是歌曲并没有实际切换，怎么办呢？
回复 @知足常乐：
2.1.4 已修
回复 @MoeShin：
还有一个问题，国内用户无法访问github，有没有其他方式可以获取到QPlayer2.1.3最新版本呢？
回复 @知足常乐：
已经找到了梯子，现在可以访问GitHub了。
回复 @知足常乐：
https://gitee.com/moeshin/QPlayer2
https://www.jsdelivr.com/package/gh/moeshin/QPlayer2
作者您好！已经将QPlayer2升级到了2.1.3版本，刚遇到一个新的问题，Qplayer2播放器在Safari浏览器中，播放列表会失效，无论是顺序播放还是随机播放，一首歌曲播放完成以后都不会自动开始播放列表中的下一首歌曲，有没有什么好办法能够解决？
回复 @知足常乐：
2.1.2 会有这个问题吗？
看了这么多评论感觉博主真得太有耐心了，爱了，而且我也喜欢Clannad，最喜欢的一部。
有个地方想请教一下博主，就是我使用typecho的插件配置的，但是使用代码
{"server": "netease", "type": "playlist", "id": "*"}
的时候无法加载动态歌单是怎么回事呢
回复 @Rakien：
好像可以了，得加个[]括起来，蚌埠住了
作者你好！请问一下如何设置音乐音量大小呢，感觉音乐声太大了
回复 @GoldenWater：
QPlayer.audio.volume