Soundkit NPM | npm.io

SoundKit: Easy In-Browser Audio

Easy to use service for loading and playing sounds in web applications.

Features:

Uses AudioContext under the hood
ES7 / Async support
Mix and nest various sounds via group support
Easy fading of specific groups
Easy muting of specific groups
Vue plugin support
Fully tested

Requirements

Node 14+

Installation

npm install soundkit

Usage

Standalone

import { SoundKit } from 'soundkit'
import beep from './sounds/beep.mp3'

let sound = new SoundKit()
async function run() {
    sound.init()
    await sound.load({ beep })
    sound.play('beep')
}
run()

Vue Plugin

When creating your app:

import { SoundKit } from 'soundkit'
const player = new SoundKit()
app.use(player) // Use Vue.use(player) for 2.x

Inside a component (Vue 3.x / Composition API):

import { inject } from 'vue'
import yell from './sounds/yell.ogg'

const sound = inject('$sound')
sound.init()
await sound.load({ yell })

function click() {
    sound.play('yell')
}

Inside a component (Vue 2.x / Options API):

import yell from './sounds/yell.ogg'

export default {
    ...
    click() {
        this.$sound.play('yell')
    },
    async created() {
        this.$sound.init()
        await this.$sound.load({ yell })
    }
}

API Docs

Class `SoundKit`

`new SoundKit(options?: { defaultFadeDuration? })`

Create a new SoundKit player.

defaultFadeDuration: Default duration for all fades in seconds (optional) (default: 0.5)

`soundkit.addGroup(parent: string, group: { name: string, level?: float, muted?: Boolean })`

Create a sound group.

parent: Which group to add as a child to (optional) (set undefined to use this group as a root group)
name: Group name
level: Initial gain level (optional) (default: 1)
muted: Whether this group should start muted (optional) (default: false)

`soundkit.addGroups(groups: Array, parent?: string)`

Add an array of groups.

groups: Array of groups to add (see addGroup() for group object definition)
parent: Which group to add as children to (optional) (leave undefined to add as root)

`soundkit.fadeIn(groupName: string, duration?: number) : Promise`

Gradually decrease gain of group. Resolves when complete.

groupName: Name of group to fade (optional) (default: "master")
duration: Duration of fade in seconds (optional) (default: SoundKit.defaultFadeDuration)