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
• isAutoplay
• isListNoHistory

Related Projects

• QPlayer2-Typecho
• QPlayer2-WordPress
• QPlayer2-ZBlog

License