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

1. Previous track/Next track, shuffle, loop buttons
2. Shuffle, volume, loop values persistant on local storage.
3. Flexible.
4. 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 |