Skip to content

Latest commit

 

History

History
74 lines (56 loc) · 2.24 KB

README.md

File metadata and controls

74 lines (56 loc) · 2.24 KB
Raw

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