$ yarn add h5player
# or
$ npm install h5player -S
h5player
Via global
<link rel="stylesheet" href="https://unpkg.com/h5player/dist/style.css">
<script src="https://unpkg.com/h5player/dist/index.js"></script>
<script>
const { H5Player } = window;
</script>
Via CMD
const H5Player = require('h5player');
Via ESModule
import H5Player from 'h5player';
Create a player and append it to document.body
(or any mounted element).
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);
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.
Normal theme:
Simple theme: (multiple players)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型