svelte-attach-sound

A Svelte attachment for binding sound playback to DOM events using the Svelte 5 attachments API.

Uses Howler.js as a peer dependency.

Find CC-Zero licensed sounds at freesound.org

Installation

npm install svelte-attach-sound howler

Example

<script lang="ts">
  import { sound, useSound } from "svelte-attach-sound";
  import click_mp3 from "$lib/assets/click.mp3";

  const click = useSound(click_mp3, ["pointerdown"]);
</script>

<!-- Inline -->
<button {@attach sound({ src: click_mp3, events: ["click"] })}>Click</button>

<!-- Factory: reusable with shared defaults -->
<button {@attach click()}>Click</button>
<button {@attach click({ volume: 0.5 })}>Click (quieter)</button>

Demo | npm

API

sound(options)

Svelte attachment that plays a sound on a DOM event.

| Option | Type | Required | Description | | --------- | -------------------------------------------------------------- | -------- | -------------------------------------------------- | | src | string \| string[] | Yes | Audio file URL(s), with fallbacks | | events | [playEvent, stopEvent?] | Yes | DOM event to trigger play, and optionally stop | | ...rest | HowlOptions | No | Any Howler option (volume, loop, rate, etc.) |

useSound(src, events, options?)

Factory that returns a reusable attachment with preset defaults. The returned function accepts optional per-call overrides.

<script lang="ts">
  const click = useSound(click_mp3, ["pointerdown"], { volume: 0.8 });
</script>

<button {@attach click()}>Uses defaults</button>
<button {@attach click({ volume: 0.3 })}>Override volume</button>

Sound class

For manual control outside of attachments:

import { Sound } from "svelte-attach-sound";

const s = new Sound(click_mp3, { volume: 0.5 });
s.play();
s.stop();
s.destroy(); // stops playback and frees resources