# WaveformPlayer

> Documentation for the @arraypress waveform family — a small, zero-dependency set of vanilla-JS audio components.

**The vanilla-JS waveform audio player — plus a bar, playlist, analytics and a
peaks CLI.** A small, zero-dependency family configured from plain markup: drop
in a script and a few `data-*` attributes and ship. ~10KB gzipped, no dependencies.

```html
<link rel="stylesheet" href="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.css">
<script src="https://unpkg.com/@arraypress/waveform-player/dist/waveform-player.min.js"></script>

<div data-waveform-player data-url="/audio/track.mp3" data-waveform-style="mirror"></div>
```

That is a complete, working player. Start with
[Installation](/getting-started/installation/) and
[Quick start](/getting-started/quick-start/).

<Aside type="tip" title="Building with an AI agent?">
	Point it at [`waveformplayer.com/llms.txt`](https://waveformplayer.com/llms.txt)
	— a machine-readable reference for the whole family.
</Aside>

## The core player

<CardGrid>

	<LinkCard title="Options" href="/player/options/" description="Every option, as a JS prop or data-* attribute." />
	<LinkCard title="Data attributes" href="/player/data-attributes/" description="The full markup contract." />
	<LinkCard title="Methods & events" href="/player/methods/" description="Drive and observe playback." />
	<LinkCard title="Styling" href="/player/styling/" description="Colors, presets and CSS variables." />

</CardGrid>

## Extensions

<CardGrid>

	<LinkCard title="WaveformBar" href="/extensions/bar/" description="Persistent Spotify-style bottom bar." />
	<LinkCard title="WaveformPlaylist" href="/extensions/playlist/" description="Playlists, chapters and albums." />
	<LinkCard title="WaveformTracker" href="/extensions/tracker/" description="Privacy-first listen analytics." />
	<LinkCard title="WaveformGen" href="/extensions/gen/" description="Pre-generate peaks at build time." />

</CardGrid>

## Every environment

<CardGrid>

	<LinkCard title="Plain HTML / CDN" href="/frameworks/plain-html/" description="No build step." />
	<LinkCard title="React" href="/frameworks/react/" description="Typed component + ref handle." />
	<LinkCard title="Astro" href="/frameworks/astro/" description="Typed, SSR-safe component." />
	<LinkCard title="Vue" href="/frameworks/vue/" description="Mount in onMounted." />
	<LinkCard title="WordPress" href="/frameworks/wordpress/" description="Enqueue + shortcode." />
	<LinkCard title="Shopify" href="/frameworks/shopify/" description="Theme + Liquid sections." />

</CardGrid>