audio-tool
A native audio custom web component
Description
An audio custom web component built with the native customElements.define function and on top of the HTML Audio element. No javascript library or framework attached.
Live Demo
Check out a live demo here.
Install
npm install audio-tool
How to use
- Inject in the script through a script tag in the HEAD of your index.html.
- Start using it in an html file.
PolyFill
Using a browser that doesn't natively support custom web components?
Add the following to the HEAD of your index.html.
or go here to learn more...
Responsiveness
Add the following meta tag for responsiveness across all devices.
This tag is not specific to this component. This is required for any app to understand the screen size in mobile browsers.
Customizations
Attribute | type | Description | Default |
---|---|---|---|
src | string | the path to your audio file | none |
title | string | Define the track title. | The path to your audio file |
auto-play | boolean | Automatically start playing the track onload | false |
styles | boolean | Defines whether the element uses the default styles or not. | true |
preload | string: auto , metadata , none |
Defines if the audio file should be loaded when the page loads | auto |
Note: The preload attribute is ignored if autoplay is present.
Browser Compatibility
Mozilla Browser Compatibility Table for customElements.define
Specs
- CSS Grid
- Babel
- Babel Minifier
- Live Sass compiler
- customElements.define()
- Material UI SVG Icons
- Audio HTML Element