Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rajaniraiyn/svelte-sound

sound interactions made easy
https://github.com/rajaniraiyn/svelte-sound

hacktoberfest svelte svelte-action sveltekit vite

Last synced: about 5 hours ago
JSON representation

sound interactions made easy

Host: GitHub
URL: https://github.com/rajaniraiyn/svelte-sound
Owner: Rajaniraiyn
License: mit
Created: 2022-11-26T16:34:31.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-12-09T08:23:36.000Z (15 days ago)
Last Synced: 2024-12-17T12:05:38.774Z (7 days ago)
Topics: hacktoberfest, svelte, svelte-action, sveltekit, vite
Language: TypeScript
Homepage: https://rajaniraiyn.github.io/svelte-sound/
Size: 281 KB
Stars: 47
Watchers: 1
Forks: 2
Open Issues: 7
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


# svelte-sound

[![TypeScript](https://badgen.net/badge/icon/typescript?icon=typescript&label)](https://typescriptlang.org) [![NPM package version](https://badgen.net/npm/v/svelte-sound)](https://npmjs.com/package/svelte-sound) [![NPM total downloads](https://img.shields.io/npm/dt/svelte-sound)](https://npmjs.com/package/svelte-sound) [![GitHub license](https://badgen.net/github/license/Rajaniraiyn/svelte-sound)](LICENSE) ![Made for svelte](https://img.shields.io/badge/made%20for-svelte-red)

Svelte Actions to play interaction sounds on target DOM events



## Features

- Lightweight and performant

- Only [Howler](https://howlerjs.com) core is used

- Loads Howler using dynamic imports to support partial hydration

- Scalable (can be used in complex game interactions)

- Truly reactive by default

## Installation

```sh

npm i svelte-sound

```

or

```sh

yarn add svelte-sound

```

or

```sh

pnpm i svelte-sound

```

## Usage

`svelte-sound` can be used in three ways,

1. `sound`

2. `useSound`

3. `Sound` class

### `sound`

This can be directly used on elements within svelte as a svelte action.

This actions following mandatory options,

| Option | Type | Description |

| --- | --- | --- |

| `src` | `string` | The source of the sound file |

| `events` | `[PlayEvent, StopEvent?]` | An array of events to play and stop the sound and valid [Howler Core Options](https://github.com/goldfire/howler.js/#options) as optional options

```svelte

  import { sound } from "svelte-sound";

  import click_mp4 from "./assets/click.mp4";

    Click Me!!

```

### `useSound`

This can be reused multiple times on multiple elements within svelte. This returns a svelte action.

This method accepts following parameters,

| Parameter | Type | Description |

| --- | --- | --- |

| `src` | `string` | The source of the sound file |

| `events` | `[PlayEvent, StopEvent?]` | An array of events to play and stop the sound |

| `options` | `HowlerOptions?` | An object of valid [Howler Core Options](https://github.com/goldfire/howler.js/#options) |

```svelte

  import { useSound } from "svelte-sound";

  import click_mp4 from "./assets/click.mp4";

  const click_sound = useSound(click_mp4, ["click"])

    Click Me!!

    Click Me Twice!!

```

### `Sound` class

This can be used to play the sound programmatically. This returns a `Sound` class instance.

This method accepts following parameters,

| Parameter | Type | Description |

| --- | --- | --- |

| `src` | `string` | The source of the sound file |

| `options` | `HowlerOptions?` | An object of valid [Howler Core Options](https://github.com/goldfire/howler.js/#options) |

```js

import { Sound } from "svelte-sound";

import click_mp4 from "./assets/click.mp4";

const click_sound = new Sound(click_mp4);

function playSound() {

  click_sound.play();

} // playSound can be called anywhere in the code

```

## Example

For usage example have a look at [example](example/) directory

## FAQs

> How to Stop the sound/audio?

You can always pass an event as the second element of the `events` array to stop the sound on that event.

e.g.

```svelte

  import { sound } from "svelte-sound";

  import click_mp4 from "./assets/click.mp4";

    Click Me!!

```

In the above example the sound will be played on `click` and stopped on `dblclick`

Alternatively you can use `play` and `stop` 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.

```svelte

  import { sound } from "svelte-sound";

  import click_mp4 from "./assets/click.mp4";

  let button;

 button.stop()}

  use:sound={{src: click_mp4, events: ["click"]}}>

    Click Me!!

```

In the above example the sound will be played on `click` and stopped on `dblclick` using the `stop` 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.

```js

import { Sound } from "svelte-sound";

import click_mp4 from "./assets/click.mp4";

const click_sound = new Sound(click_mp4);

function playSound() {

  click_sound.play();

}

```

In the above example the sound will be played on calling the `play` method of the `click_sound` object.

## License

[MIT](LICENSE)



---

Made with ❤️ by [Rajaniraiyn](https://rajaniraiyn.github.io)

[`^^^ move to top ^^^`](#top)