# Plain HTML / CDN
> No build step — script tag + markup.
The fastest way to ship a waveform player: one stylesheet, one script, and a `
` with `data-*` attributes. No bundler, no build step, no framework. The library scans the page on load, finds every `[data-waveform-player]` element, and turns it into a player automatically.
## Quick start
1. **Add the stylesheet** in your ``. The CSS is required — without it the player renders unstyled.
2. **Add the script** anywhere on the page. It exposes a global `WaveformPlayer` and auto-initialises on load.
3. **Mark up a player** with `data-waveform-player` plus a `data-src` pointing at your audio.
```html title="index.html"
```
That's a complete, working player. The `data-waveform-player` attribute is the marker the library scans for; everything else is optional configuration. See [Data attributes](/player/data-attributes/) for the full list.
## How auto-init works
When the script loads it runs `WaveformPlayer.init()` for you:
- On `DOMContentLoaded` if the document is still parsing, or **immediately** if the document is already interactive (so placement in `` or end-of-`` both work).
- It selects every `[data-waveform-player]` element and constructs a `WaveformPlayer` for each one that isn't already initialised.
- After initialising an element it sets `data-waveform-initialized="true"` on it. This makes re-scanning **idempotent** — calling `WaveformPlayer.init()` again never double-initialises.
### Re-scanning after dynamic inserts
If you inject markup after the initial load (AJAX, a modal, a client-side route change), call `init()` again to pick up the new elements. Already-initialised players are left untouched.
```html
```
### Script placement & `defer`
The bundle is a self-contained IIFE that assigns `window.WaveformPlayer`. Both of these are valid:
```html
```
## Reaching players from script
After auto-init, every player is reachable through static lookups on the global — no need to hold a reference. Pass an element, an element `id`, or the instance id.
```html
```
| Static helper | Returns |
| --- | --- |
| `WaveformPlayer.getInstance(idOrElement)` | The matching instance, or `undefined`. |
| `WaveformPlayer.getAllInstances()` | Every live instance. |
| `WaveformPlayer.init()` | Re-scans the DOM and initialises new players. |
| `WaveformPlayer.destroyAll()` | Tears down every instance. |
| `WaveformPlayer.utils` | Shared pure helpers (`formatTime`, `extractTitleFromUrl`, `escapeHtml`, `isSafeHref`, `parseDataAttributes`). |
See [Methods](/player/methods/) and [Events](/player/events/) for the complete surface.
### Constructing manually
You don't have to use `data-*`. The same global works as a constructor — useful when you want options computed in JavaScript:
```html
```
Options merge in precedence order **defaults < `data-*` < constructor options**, so a JS option always wins over the same `data-*` attribute on the element.
## CDN providers
The package publishes a minified IIFE bundle and a stylesheet. Pin to a major version (`@1`) for automatic patch/minor updates, or pin an exact version for fully reproducible builds.
```html
```
```html
```
### Files in `dist/`
| File | Use |
| --- | --- |
| `waveform-player.min.js` | Minified IIFE for `
```