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

• https://github.com/DIYgod/APlayer/

License