svelte-audio-controls
v1.0.5
Published
Audio tag wrapper with styled elements using svelte, to give the same experience across browsers.
Downloads
5
Readme
Svelte-audio-controls
Simple wrapper around the audio tag to provide the same gui controls across browsers, exposes some of the events/values so far as well as some styling options.
Demo: http://linkcube.github.io/
Features
Takes in an audio source, will expose the internal audio element as well as some of the bind-able events (i.e play/ended). Includes:
- Play/pause button
- Song progress bar with click to seek
- Volume mute button
- Volume progress bar with click to seek
- current time / total duration text
- Tooltip on song bar hover with the hovered time
Styling
This part is going to be fairly rough until I figure out a standard for themeing across my components, but for now it exposes iconColor/textColor/barPrimaryColor/barSecondaryColor/backgroundColor on creation.
Usage
let src = "my_file.mp3";
<AudioControls
{src}
display={true}
></AudioControls>Make sure to include <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> in your application for the icons.
Recommended width is 400px to 900px
Exposed Functions:
Function | Description
-- | --
show() | Display the controls
hide() | Hide the controls
Exposed Events:
Event | Description
-- | --
on:play | When the audio is played
on:ended | The audio has reached the end of it's buffer
Bindings:
Name | Description
-- | --
bind:audio | Internal audio element
bind:paused | The paused value of the audio
bind:duration | Duration of the audio element
bind:muted | Muted state of the audio element
bind:volume | Volume state of the audio
Optional settings:
Param | Description | Type
--- | --- | ---
inlineTooltip| Keeps the tooltip on the controls bar rather than hovering. | Boolean
disableTooltip| Disables the tooltip completely. | Boolean
display | Whether to show the controls initially | Boolean
iconColor textColor barPrimaryColor barSecondaryColor backgroundColor | Change the color of the elements in the controls | CSS colors
preload | Preload state for the audio component | Refer to the audio element for this, e.x: "metadata"
Todo
- Better theming/styling access
- Sizing