| search | english |
|---|
🍭 Wow, such a beautiful HTML5 music player
Using npm:
npm install aplayer --save
Using Yarn:
yarn add aplayer
<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>const ap = new APlayer({
container: document.getElementById('aplayer'),
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});Work with module bundler:
import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer';
const ap = new APlayer(options);| Name | Default | Description |
|---|---|---|
| container | document.querySelector('.aplayer') | player container |
| mini | false | enable mini mode, see more details |
| autoplay | false | audio autoplay |
| theme | '#b7daff' | main color |
| loop | 'all' | player loop play, values: 'all', 'one', 'none' |
| order | 'list' | player play order, values: 'list', 'random' |
| preload | 'auto' | values: 'none', 'metadata', 'auto' |
| volume | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves |
| audio | - | audio info, should be an object or object array |
| audio.name | - | audio name |
| audio.artist | - | audio artist |
| audio.url | - | audio url |
| audio.cover | - | audio cover |
| audio.lrc | - | see more details |
| mutex | true | prevent to play multiple player at the same time, pause other players when this player start play |
| lrc | false | see more details |
| listFolded | false | indicate whether list should folded at first |
| listMaxHeight | - | list max height |
For example:
const ap = new APlayer({
container: document.getElementById('player'),
mini: false,
autoplay: false,
theme: '#FADFA3',
loop: 'all',
order: 'random',
preload: 'auto',
volume: 0.7,
mutex: true,
listFolded: false,
listMaxHeight: '90px',
lrc: 3,
audio: [
{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg',
lrc: 'lrc1.lrc'
},
{
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg',
lrc: 'lrc2.lrc'
}
]
});-
ap.play(): play audio -
ap.pause(): pause audio -
ap.seek(time: number): seek to specified timeap.seek(100);
-
ap.toggle(): toggle between play and pause -
ap.on(event: string, handler: function): bind audio and player events, see more details -
ap.switchAudio(index: number): switch audio listap.switchAudio(1);
-
ap.addAudio(audio): add new audios to the listap.addAudio([ { name: 'name', artist: 'artist', url: 'url.mp3', cover: 'cover.jpg', lrc: 'lrc.lrc' } ]);
-
ap.removeAudio(index: number): remove audio from the listap.removeAudio(1);
-
ap.volume(percentage: number, nostorage: boolean): set audio volumeap.volume(0.1, true);
-
ap.destroy(): destroy player -
ap.audio: native audio -
ap.audio.currentTime: returns the current playback position -
ap.audio.duration: returns audio total time -
ap.audio.paused: returns whether the audio paused -
most native api are supported
ap.on(event, handler)
ap.on('ended', function () {
console.log('player ended');
});Video events
- abort
- canplay
- canplaythrough
- durationchange
- emptied
- ended
- error
- loadeddata
- loadedmetadata
- loadstart
- mozaudioavailable
- pause
- play
- playing
- progress
- ratechange
- seeked
- seeking
- stalled
- suspend
- timeupdate
- volumechange
- waiting
Player events
- switchaudio
- addaudio
- removeaudio
- destroy
We have three ways to pass LRC to APlayer, indicate the way to pass LRC by option lrc, then put lrc to option audio.lrc or HTML.
The first way, put LRC to a LRC file, LRC file will be loaded when this audio start to play.
const ap = new APlayer({
container: document.getElementById('aplayer'),
lrc: 3,
audio: {
name: 'name',
artist: 'artist',
url: 'demo.mp3',
cover: 'demo.jpg',
lrc: 'lrc.lrc'
}
});The second way, put LRC to a JS string.
const ap = new APlayer({
container: document.getElementById('aplayer'),
lrc: 1,
audio: {
name: 'name',
artist: 'artist',
url: 'demo.mp3',
cover: 'demo.jpg',
lrc: '[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing'
}
});The third way, put LRC to HTML.
<link rel="stylesheet" href="APlayer.min.css">
<div id="player">
<pre class="aplayer-lrc-content">
[00:00.00]APlayer audio1
[00:04.01]is
[00:08.02]amazing
<!-- ... -->
</pre>
<pre class="aplayer-lrc-content">
[00:00.00]APlayer audio2
[00:04.01]is
[00:08.02]amazing
<!-- ... -->
</pre>
</div>
<script src="APlayer.min.js"></script>const ap = new APlayer({
container: document.getElementById('aplayer'),
lrc: 2,
audio: [[
{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg'
},
{
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg'
}
]]
});The following LRC format are supported:
[mm:ss]APlayer
[mm:ss.xx]is
[mm:ss.xxx]amazing
[mm:ss.xx][mm:ss.xx]APlayer
[mm:ss.xx]<mm:ss.xx>is
[mm:ss.xx]amazing[mm:ss.xx]APlayer
APlayer will show a playlist when it has more than one audio, option listFolded indicates whether list should folded at first, and option listMaxHeight indicates list max height.
const ap = new APlayer({
container: document.getElementById('player'),
listFolded: false,
listMaxHeight: '90px',
lrc: 3,
audio: [
{
name: 'name1',
artist: 'artist1',
url: 'url1.mp3',
cover: 'cover1.jpg',
lrc: 'lrc1.lrc'
},
{
name: 'name2',
artist: 'artist2',
url: 'url2.mp3',
cover: 'cover2.jpg',
lrc: 'lrc2.lrc'
}
]
});If you don't have enough space for normal player, mini mode might be your choice.
const ap = new APlayer({
container: document.getElementById('player'),
mini: true,
audio: [{
name: 'name',
artist: 'artist',
url: 'url.mp3',
cover: 'cover.jpg',
}]
});Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.