<!-- componentName: sound-example -->

# A sound button

Each instance selects and triggers its own cue. The audio path resolves beside
this component Source. This works in reading, Focus, and Slides.

```html
<div class="sound-example">
  <button type="button" class="pmx-button" data-variant="outline" data-pmx-play-affordance data-pmx-play-icon="play">Play a chime</button>
  <x-sfx-cue class="chime" src="./reveal.wav" />
</div>
```

```js
on("button", "click", () => {
  $(".chime").dispatchEvent(new Event("sfx:play"))
})
```
