Repository files navigation

• Lightweight and performant
• OnlyHowler core is used
• Loads Howler using dynamic imports to support partial hydration
• Scalable (can be used in complex game interactions)
• Truly reactive by default

npm i svelte-sound

or

yarn add svelte-sound

or

pnpm i svelte-sound

svelte-sound can be used in three ways,

1. sound
2. useSound
3. Sound class

This can be directly used on elements within svelte as a svelte action.This actions following mandatory options,

<script>import {sound }from"svelte-sound";importclick_mp4from"./assets/click.mp4";</script><buttonuse:sound={{src:click_mp4,events: ["click"]}}>    Click Me!!</button>

This can be reused multiple times on multiple elements within svelte. This returns a svelte action.This method accepts following parameters,

<script>import {useSound }from"svelte-sound";importclick_mp4from"./assets/click.mp4";constclick_sound=useSound(click_mp4, ["click"])</script><buttonuse:click_sound>    Click Me!!</button><!-- Options can be overwritten --><buttonuse:click_sound={{events:["dblclick"]}}>    Click Me Twice!!</button>

This can be used to play the sound programmatically. This returns aSound class instance.This method accepts following parameters,

import{Sound}from"svelte-sound";importclick_mp4from"./assets/click.mp4";constclick_sound=newSound(click_mp4);functionplaySound(){click_sound.play();}// playSound can be called anywhere in the code

For usage example have a look atexample directory

How to Stop the sound/audio?

You can always pass an event as the second element of theevents array to stop the sound on that event.e.g.

<script>import {sound }from"svelte-sound";importclick_mp4from"./assets/click.mp4";</script><buttonuse:sound={{src:click_mp4,events: ["click","dblclick"]}}>    Click Me!!</button>

In the above example the sound will be played onclick and stopped ondblclick

Alternatively you can useplay andstop methods added to the element by the action. To play or stop the sound you can call the respective methods on the element.e.g.

<script>import {sound }from"svelte-sound";importclick_mp4from"./assets/click.mp4";let button;</script><buttonbind:this={button}on:dblclick={()=>button.stop()}use:sound={{src:click_mp4,events: ["click"]}}>    Click Me!!</button>

In the above example the sound will be played onclick and stopped ondblclick using thestop method which we done programmatically.

How to use this library programmatically without any DOM events?

You can use Sound class exported by the package to play the sound programmatically.e.g.

import{Sound}from"svelte-sound";importclick_mp4from"./assets/click.mp4";constclick_sound=newSound(click_mp4);functionplaySound(){click_sound.play();}

In the above example the sound will be played on calling theplay method of theclick_sound object.

MIT