Svelte Aplayer
Music player in Svelte with custom element (web component) build
Svelte APlayer
Aplayer port in Svelte with Custom element (WebComponent) build
Introduction
This is a Aplayer port in Svelte.
Thanks to Svelte, It is framework agnostic and no runtime required with prebuild custom element bundle.
It should be a good alternative to hexo-tag-aplayer as well as any environment in which you can customise your HTML by using custom element.
Drawback: Due to the limitaion of custom element, Instead of use object in the props of custom element, You need to pass a strict json string. And all props are snake case style naming.
Usage
npm i svelte-aplayer
Using in webcomponent Example
Using in Svelte
import Aplayer from 'svelte-aplayer/dist/svelte/svelte-aplayer.es.js'
import 'svelte-aplayer/dist/svelte/style.css'
...
<Aplayer audio={
{name:'君の知らない物語',
artist: 'supercell',
cover: 'https://blog-static.fengkx.top/svelte-aplayer/bakemonogatari-ed.jpg',
url: "https://blog-static.fengkx.top/svelte-aplayer/bakemonogatari-ed.mp3"}} />
Options
| Name | Default | Description |
|---|---|---|
| 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' |
| 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 strict json string is required in custom element |
| audio.name | - | audio name |
| audio.artist | - | audio artist |
| audio.url | - | audio url |
| audio.cover | - | audio cover |
| audio.lrc | - | URL or string of lrc file |
| audio.theme | - | main color when switching to this audio, it has priority over the above theme |
| mutex | true | prevent to play multiple player at the same time, pause other players when this player start play |
| list_folded | false | indicate whether list should folded at first |
| list_max_height | - | list max height |
| base_font_size | 12 | base font size to adjust the whole size of the player as well as lrc font size |
Event
Audio Events
- abort
- canplay
- canplaythrough
- durationchange
- emptied
- ended
- error
- loadeddata
- loadedmetadata
- loadstart
- mozaudioavailable
- pause
- play
- playing
- progress
- ratechange
- seeked
- seeking
- stalled
- suspend
- timeupdate
- volumechange
- waiting
For svelte compatibility native events are wrapped in the detail property of the CustomEvent.
document.querySelector("s-aplayer").addEventListener("play", (ev) => {
console.log(ev); // CustomEvent object
console.log(ev.detail); // audio element play event object
});
Player Events
- listshow
- listhide
- listswitch
- listchange
- destroy
- lrcshow
- lrchide
Piror Art
License
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.