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

Links

npm github