QPLayer2

jsDelivr
jsDelivr
GitHub

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

支付宝红包

支付宝

微信

标签: none

已有 43 条评论

  1. GoldenWater GoldenWater 访客 Chrome Windows 10 回复

    作者你好!请问一下如何设置音乐音量大小呢,感觉音乐声太大了

    1. MoeShin MoeShin 博主 Chrome Windows 10 回复

      回复 @GoldenWater

      QPlayer.audio.volume

  2. Rakien Rakien 访客 Chrome Windows 10 回复

    看了这么多评论感觉博主真得太有耐心了,爱了,而且我也喜欢Clannad,最喜欢的一部。

    有个地方想请教一下博主,就是我使用typecho的插件配置的,但是使用代码
    {"server": "netease", "type": "playlist", "id": "*"}
    的时候无法加载动态歌单是怎么回事呢

    1. Rakien Rakien 访客 Chrome Windows 10 回复

      回复 @Rakien

      好像可以了,得加个[]括起来,蚌埠住了

  3. 知足常乐 知足常乐 访客 Safari Mac OSX 回复

    作者您好!已经将QPlayer2升级到了2.1.3版本,刚遇到一个新的问题,Qplayer2播放器在Safari浏览器中,播放列表会失效,无论是顺序播放还是随机播放,一首歌曲播放完成以后都不会自动开始播放列表中的下一首歌曲,有没有什么好办法能够解决?

    1. MoeShin MoeShin 博主 Chrome Windows 10 回复

      回复 @知足常乐

      2.1.2 会有这个问题吗?

  4. 知足常乐 知足常乐 访客 Chrome Mac OSX 回复

    尊敬的作者您好!非常喜欢这款强大的mini播放器,请教一个问题,想做成动态更新歌单的播放器,就是动态的生成播放list,但是怎么样才能每次更新list播放器可以自动播放list中index为0的歌曲呢?就睡每次点击更新list按钮以后,播放器自动播放最新的一首歌曲,不胜感谢!

    1. MoeShin MoeShin 博主 Chrome Windows 10 回复

      回复 @知足常乐

      更到 2.1.3
      QPlayer.isListNoHistory = true;

      1. 知足常乐 知足常乐 访客 Safari Mac OSX 回复

        回复 @MoeShin

        还有一个问题,国内用户无法访问github,有没有其他方式可以获取到QPlayer2.1.3最新版本呢?

        1. MoeShin MoeShin 博主 Chrome Windows 10 回复

          回复 @知足常乐

          https://gitee.com/moeshin/QPlayer2

          https://www.jsdelivr.com/package/gh/moeshin/QPlayer2

        2. 知足常乐 知足常乐 访客 Safari Mac OSX 回复

          回复 @知足常乐

          已经找到了梯子,现在可以访问GitHub了。

      2. 知足常乐 知足常乐 访客 Safari Mac OSX 回复

        回复 @MoeShin

        作者您好!多谢您的回复,按照您的指导,初始化加上了QPlayer.isListNoHistory = true;目前动态更新列表播放器可以显示正在播放的最新添加的歌曲信息,但是音乐实际播放的歌曲还是上一首的歌曲,也就是说只刷新了播放器显示的歌曲信息,但是歌曲并没有实际切换,怎么办呢?

        1. MoeShin MoeShin 博主 Chrome Windows 10 回复

          回复 @知足常乐

          2.1.4 已修

  5. kay kay 访客 Chrome Windows 10 回复

    你好,要关闭刷新续播,每次从头开始播放的代码是什么呢。

    1. MoeShin MoeShin 博主 Chrome Windows 10 回复

      回复 @kay

      刷新不会续播吧

添加新评论

注意:已开启评论过滤器,无中文无法评论!
泡泡表情