Audio Web Component Pack

€49 — One-time purchase

A set of production-ready web components for building audio applications. Framework-agnostic, TypeScript-first, and designed to work out of the box.

What’s included

Waveform Player

Interactive waveform visualisation with playback controls. Supports click-to-seek, zoom, and custom theming. Built on WaveSurfer.js.

Audio Level Meter

Real-time audio level meter with peak hold, RMS display, and configurable colour thresholds. Uses Web Audio API’s AnalyserNode.

Playback Controls

Play, pause, skip, volume, and playlist navigation. Responsive design, keyboard accessible, and screen-reader friendly.

TypeScript Types

Full TypeScript definitions for all components. Autocomplete and type safety in any editor.

Technical details

Framework-agnostic — Web Components (Custom Elements v1). Works with React, Vue, Svelte, Angular, or plain HTML.
TypeScript — Written in TypeScript with full type exports. No any types.
Lightweight — No heavy dependencies. Components use the Web Audio API and Canvas/SVG for rendering.
Accessible — ARIA attributes, keyboard navigation, and screen-reader support built in.
Themeable — CSS custom properties for colours, sizes, and spacing. Matches your design system.
MIT licensed — Use in commercial projects without restrictions.

Browser support

Browser	Version
Chrome	80+
Firefox	78+
Safari	14+
Edge	80+

Installation

# After purchase, you'll receive access to the npm package
npm install @joellof/audio-components

<!-- Or include via script tag from the download -->
<script type="module" src="audio-components.min.js"></script>

Usage

<waveform-player src="/audio/track.mp3" theme="dark"></waveform-player>
<audio-meter source="microphone" peak-hold="true"></audio-meter>
<playback-controls for="waveform-player"></playback-controls>

Live demos

These components power several projects in the portfolio:

Sidechain Compressor Real-time AudioWorklet compressor with waveform visualisation.

Codec Support Test Interactive tool using the audio playback components.

Buy now

After purchase, you’ll receive an email with download instructions and npm package access.

← Back to Store