This is a light blazingly fast yet simple minimalistic audio player for svelte.
npm install --save svelte-mp3
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']
/>
bind:controller
A way to interact with controller instance.
HTMLElement
{}
<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.
HTMLAudioElement
{}
<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
string
disableVolSlider
Removes volume control slider if true.
boolean
false
color
coloring the outlines and buttons
string
'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
boolean
true
loop
playback same audio every time or all audio in a loop.
'repeat-all', 'repeat', 'no-repeat'
'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
MediaMetadataInit []
[]
showNext
hides next button if false.
boolean
true
showPrev
hides previous button if false.
boolean
true
showTime
display current time and duration of an audio.
boolean
true
showTrackNum
display currently playing track number.
boolean
true
showShuffle
display shuffle button if true.
boolean
true
showVolume
display speaker icon and volume control slider if true.
boolean
true
shuffle
playback random track number if true.
boolean
true
style
string
urls
array of audio source/url
string []
[]
volume
value between 0 to 1.
number
1
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.
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 |