https://github.com/gera2ld/h5player
HTML5 music player
https://github.com/gera2ld/h5player
Last synced: 9 months ago
JSON representation
HTML5 music player
- Host: GitHub
- URL: https://github.com/gera2ld/h5player
- Owner: gera2ld
- Created: 2015-04-18T15:10:58.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-03-03T16:29:23.000Z (over 8 years ago)
- Last Synced: 2025-04-12T04:48:38.054Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 329 KB
- Stars: 30
- Watchers: 10
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## H5Player
### Installation
``` sh
$ yarn add h5player
# or
$ npm install h5player -S
```
### Usage
1. Load `h5player`
* Via global
``` html
const { H5Player } = window;
```
* Via CMD
``` javascript
const H5Player = require('h5player');
```
* Via ESModule
```js
import H5Player from 'h5player';
```
2. Create a player and append it to `document.body` (or any mounted element).
``` javascript
const player = new H5Player({
image: 'http://example.com/path/to/default/image',
getLyric: (song, callback) => {
const lyric = getLyricFromSomewhereElse(song);
callback(lyric);
},
});
document.body.appendChild(player.el);
player.setSongs([
{
name: 'Song1',
url: 'http://example.com/path/to/song1.mp3',
additionalInfo: 'whatever',
}, {
name: 'Song2',
url: 'http://example.com/path/to/song2.mp3',
}
]);
player.play(0);
```
### Document
Each player is built with `player = new H5Player(options)`. *options* is an object with properties below:
* `theme`: *optional* string
Possible values are `normal` (by default) and `simple`.
Can be changed by `player.setTheme(theme)`.
* `mode`: *optional* string
The repeat mode for the playlist, possible values are `repeatAll` (by default), `repeatOne` and `repeatOff`.
Can be changed by `player.setMode(mode)`.
* `showPlaylist`: *optional* Boolean
Whether to show playlist. Can be changed by `player.setPlaylist(show)`.
* `image`: *optional* string *or* object
Image shown when no image is assigned for the current song.
It can be a string of the path to the image or an object with theme names as the keys and
image paths as the values.
The recommended image size for **normal** theme is 130 * 130, and 34 * 34 for **simple** theme.
* `getLyric`: *optional* function
An async function to get the lyric. There are two parameters for the callback. The first parameter is the song object and the second is a callback to send the lyric to the player.
The `player` object has following methods:
* `setSongs`(*Array* songs)
Set playlist for the player, *songs* is a list of `object`s with properties below:
* `name`: *required* string
The name of the song.
* `url`: *required* string
A downloadable URL.
* `artist`: *optional* string
The name of the artist.
* `duration`: *optional* integer
Length of the song in seconds.
* `image`: *optional* string *or* object
The image for the current song. Similar to the default image in common settings.
* `lyric`: *optional* string
Lyric of the song, e.g. `[00:00]foo\n[00:05]bar\n...`.
* `play`(*int* index)
Start playing the *index*-th song.
* `setTheme`(*string* theme)
Change theme.
* `setMode`(*string* mode)
Change repeat mode.
* `setPlaylist`(*boolean* show)
Toggle playlist on / off.
When the play status is changed, a `PlayerEvent` will be fired with its `detail` set to an object with following attributes:
* `player`
The `Player` object that is related to this event
* `type`
`'play'` or `'pause'`
The player is mounted to `player.el`, you need to append it to the container.
### Snapshots
Normal theme:
Simple theme: (multiple players)
