Nathan's Web Components

Some web components for convenience.

How to Preview the Components

Clone this repo, then serve locally. I use live-server to do this.

How to Use the Components

In your main .js file, import the components you'd like to use:

import 'components/audioPlayer/audioPlayer.js';

then refer to the documentation below.

The Components

Audio Player

A neat little audio component that nicely displays a cover image, native audio controls, a title, and a description.

Attributes:

audio: a URI pointing to an audio file
cover: a URI pointing to a cover image
cover_alt: alt text for the cover image

Slots:

title: title for the audio file
description: a description of the audio file

CSS Custom Properties:

--background

Example usage:

<audio-player
cover="/assets/images/doge.jpg"
cover_alt="A snoozy doge!"
audio="assets/audio/KARATE KID - TOXIC (ILLFD022).wav">
    <h3 slot="title">Toxic - Britney Spears (Karate Kid Bootleg)</h3>
    <p slot="description">A massive DnB roller bootleg of a Britney Spears classic: <em>Toxic</em>.</p>
</audio-player>

README.md