svelte-mp3

Svelte-mp3

This is a light blazingly fast yet simple minimalistic audio player for svelte.

Demo

Installation

npm install --save svelte-mp3

Quickstart

Inside any *.svelte file:

  <script>
    import {AudioPlayer} from 'svelte-mp3';
  </script>
  //...
  <AudioPlayer 
    urls=['url or src of an audio1','url or src of an audio2']
  />

Features

• Previous track/Next track, shuffle, loop buttons
• Shuffle, volume, loop values persistant on local storage.
• Flexible.
• Customizable.

Props

bind:controller

A way to interact with controller instance.

• type: HTMLElement
• default: {}

<script>
...
let controller: HTMLElement = {};
$:console.dir(controller) // Output: DOM element object
</script>

<AudioPlayer {url} bind:controller={controller}/>

bind:audio

A way to interact with audio instance.

• type: HTMLAudioElement
• default: {}

<script>
...
let audio: HTMLMediaElement = {};
$:console.dir(audio) // Output: audio element object
</script>

<AudioPlayer {url} bind:audio={audio}/>

class

Any global class name for styling your player

• type: string
• default: empty string

disableVolSlider

Removes volume control slider if true.

• type: boolean
• default: false

color

coloring the outlines and buttons

• type: string
• default: 'black'

enableMediaSession

If true, lets users control playback of media through user-agent defined interface elements (media notification). Interaction with these elements triggers action handlers in the web page, playing the media. See: MDN

• type: boolean
• default: true

loop

playback same audio every time or all audio in a loop.

• type: 'repeat-all', 'repeat', 'no-repeat'
• default: 'no-repeat'

mediaMetadata

An array of MediaMetadata which lets a web site provide rich metadata to the platform UI for media that is playing. This metadata includes the title, artist (creator) name, album (collection), and artwork. The platform can show this metadata in media centers, notifications, device lockscreens, etc. See: MDN

• type: MediaMetadataInit []
• default: []

showNext

hides next button if false.

• type: boolean
• default: true

showPrev

hides previous button if false.

• type: boolean
• default: true

showTime

display current time and duration of an audio.

• type: boolean
• default: true

showTrackNum

display currently playing track number.

• type: boolean
• default: true

showShuffle

display shuffle button if true.

• type: boolean
• default: true

showVolume

display speaker icon and volume control slider if true.

• type: boolean
• default: true

shuffle

playback random track number if true.

• type: boolean
• default: true

style

• type: string
• default: empty string

urls

array of audio source/url

• type: string []
• default: []

volume

value between 0 to 1.

• type: number
• default: 1

progressBackground

background color of the audio progress bar.

• type: string
• default: gainsboro

progressForeground

foreground color of the audio progress bar.

• type: string
• default: red

API

name	type	default	desc
isPlaying	writable store Boolean	false	a global writable svelte store for checking and setting audio playback.
trackIndex	writable store number	0	currently playing track number.
state	writable store 'repeat-all', 'repeat', 'no-repeat'	'no-repeat'	looping values.
PlayIcon	svelte component
PauseIcon	svelte component
PreviousIcon	svelte component
NextIcon	svelte component
ShuffleIcon	svelte component
RepeatIcon	svelte component
RepeatOnceIcon	svelte component
NoRepeatIcon	svelte component

With global stores you can import them from any svelte component to configure audio player.

Events

svelte mp3 supports almost all events of audio tag. events are forwarded by event dispatcher. see: MDN.

Note: To access target inside of event object you need to write event.detail.target instead of event.target.

name
canplay
canplaythrough
durationchange
ended
loadeddata
playing
ratechange
stalled
suspend
timeupdate
volumechange
waiting
progress
error