# @moeshin/qplayer2
> A simple and compact HTML5 bottom hover music player.
Latest version **2.1.4** (published 2023-05-06) · MIT license · 0 weekly downloads
## Install
```sh
npm install @moeshin/qplayer2
pnpm add @moeshin/qplayer2
yarn add @moeshin/qplayer2
bun add @moeshin/qplayer2
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.1.4 |
| Published | 2023-05-06 |
| First published | 2023-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 557.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | MoeShin |
| Maintainers | moeshin |
## Links
- npm: https://www.npmjs.com/package/@moeshin/qplayer2
- Repository: https://github.com/moeshin/QPlayer2
- Homepage: https://github.com/moeshin/QPlayer2#readme
- Issues: https://github.com/moeshin/QPlayer2/issues
- npm.io page: https://npm.io/package/@moeshin/qplayer2
## Dependencies (4)
- [jquery](https://npm.io/package/jquery.md) ^3.6.0
- [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.1
- [blueimp-md5](https://npm.io/package/blueimp-md5.md) ^2.18.0
- [jquery.simplemarquee](https://npm.io/package/jquery.simplemarquee.md) ^0.3.0
## Recent versions
- 2.1.4 (latest) — 2023-05-06
## README
# QPLayer2
[](https://www.jsdelivr.com/package/gh/moeshin/QPlayer2)
[](https://github.com/moeshin/QPlayer2/releases/latest)
[](https://github.com/moeshin/QPlayer2/blob/master/LICENSE)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fmoeshin%2FQPlayer2?ref=badge_shield)
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][0] | No |
| provider | [Provider Name](#Provider) | No |
### Provider
Make loading data more flexible.
| Callback | Success param |
| --------- | ------------- |
| audio | url, cache |
| cover | url, cache |
| lyrics | [lrc][0] |
```js
/**
* @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.
```js
/**
* @param {Object} current Current list item.
* @param {Object} callbacks
* {
* success: function(name, ...arguments) {},
* error: function(name) {}
* }
*/
function callback(current, callbacks) {}
```
#### Example 1: General callback
```js
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
```js
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()](https://api.jquery.com/jQuery.ajax/) for details.
### QPlayer.setColor
```js
/**
* @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](https://github.com/defunkt/jquery-pjax).
### Other Methods
* `load(index)`
* `play(index, isPrevious)`
* `next()`
* `prevision()`
### Other Properties
* `isRotate`
* `isShuffle`
* `isAutoplay`
* `isListNoHistory`
# Related Projects
* [QPlayer2-Typecho](https://github.com/moeshin/QPlayer2-Typecho)
* [QPlayer2-WordPress](https://github.com/moeshin/QPlayer2-WordPress)
* [QPlayer2-ZBlog](https://github.com/moeshin/QPlayer2-ZBlog)
[0]: https://de.wikipedia.org/wiki/LRC_(Dateiformat)
## License
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fmoeshin%2FQPlayer2?ref=badge_large)
---
_Source: https://npm.io/package/@moeshin/qplayer2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._