synth-kit

Synthesizers construction kit for Web Audio API

Work in progress. Experimental API

synth-kit is a small (8Kb minified, 3Kb minified and gzipped) collection of ready-to-use Web Audio instruments:

import { Kick } from 'synth-kit'
const ac = new AudioContext()
 
// create a Kick instrument and connect it to the audio context destination
const kick = Kick(ac).connect(true)
// trigger the kick
kick.trigger()

Features

• Sound reasonably good
• No setup: nice defaults, no config
• Easy and simple API
• Extensible and flexible

SynthKit

Percussion instruments

• Kick
• Snare
• Hat
• Cowbell
• Conga
• Tom

Melodic instruments

• MonoSynth: One oscillator subtractive synth

Effects

Components

• Sample
• Noise
• LFO

Usage

synth-kit is designed to be very easy to use: install the library, create an instrument and trigger it.

Installation

Node

With npm: npm i --save synth-kit or with yarn: yarn add --save synth-kit

ES6:

import { Clave } from "synth-kit"
const ac = new AudioContext()
const clave = Clave(ac).connect(true)
clave.trigger()

ES5:

const SynthKit = require('synth-kit')
const ac = new AudioContext()
const clave = new SynthKit.Clave(ac).connect(true)
clave.trigger()

Browser

<script src="https://oramics.github.io/synth-kit/dist/synth-kit.js"></script>
<script>
  // SynthKit is exported as global
  const ac = new AudioContext()
  const kick = SynthKit.Kick(ac).connect(true)
  kick.trigger()
</script> 

Create instruments

Call the function with an audio context. The connect function is chainable and accepts true to connect to the AudioContext's destination:

import { MonoSynth } from 'synth-kit'
 
const mono = MonoSynth(ac).connect(true)
// trigger signature for melodic instruments: (midi, time, duration)
mono.trigger(440, ac.currentTime, 0.5)
mono.trigger(62, ac.currentTime + 1, 0.5)

Trigger

Trigger the attack/release envelope of an instrument with the trigger function:

import { Snare } from 'synth-kit'
 
const snare = Snare(ac).connect(true)
snare.trigger()

Perussion instruments accept time as trigger arguments:

snare.trigger(ac.currentTime + 1)

Melodic instruments accept frequency, time, duration as trigger arguments:

import { MonoSynth } from 'synth-kit'
 
const mono = MonoSynth(ac).connect(true)
mono.trigger(440, ac.currentTime, 0.5)

Re-triggerable

You can trigger an instrument any number of times:

mono.trigger(440, ac.currentTime, 0.5)
mono.trigger(880, ac.currentTime + 1, 0.5)

You can use Sample to get a re-triggerable buffer source:

import { Sample } from 'synth-kit'
 
fetch("snare.wav").then(decodeAudioData).then(buffer => {
  sample = Sample(ac, buffer)
  sample.trigger()
  sample.trigger(ac.currentTime + 1)
})

Attack/release

Using a melodic instrument, you can trigger the attack and release phases at different moments:

const triggerRelease = mono.trigger(440, ac.currentTime)
triggerRelease(ac.currentTime + 1)

Polyphony

All instruments are monophonic by default. You can create a polyphonic instrument with polyphonc function:

import { DuoSynth, polyphonic } from 'synth-kit'
 
const synth = polyphonic(ac, 16, DuoSynth)
const freqs = [400, 500, 600, 700]
freqs.forEach((note, i) => synth.trigger(note, ac.currentTime + i))

Update parameters

All instruments have an update function:

const duo = DuoSynth(ac)
duo.update({
  filter: {
    frequency: 800
  },
  amp: {
    gain: 0.5
  }
})
duo.trigger(440)

And an inspect function:

console.log(duo.inspect())
// console.log output:
{
  osc1: {
    frequency: 440,
    ...
  },
  osc2: {
    frequency: 880,
    ...
  },
  filter: {
    ...
  },
  amp: {
    gain: 0.6
  }
}

For fine-grained control, use the audio nodes directly:

const duo = DuoSynth(ac)
duo.filter.frequency.linearRampToValueAtTime(600, ac.currentTime + 1)

References

• Of course, the synth secrets tutorial was the beginning of all: https://github.com/micjamking/synth-secrets (that's a easy to read version). Thanks Gordon Reid (here it is an awesome PDF version)
• Vincent made some nice 808 drum synsthesis: https://github.com/vincentriemer/io-808
• Percussion synthesis tutorial: http://www.cim.mcgill.ca/~clark/nordmodularbook/nm_percussion.html
• Sound Design in Web Audio its an awesome two part blog post: http://nickwritesablog.com/sound-design-in-web-audio-neurofunk-bass-part-1/ and http://nickwritesablog.com/sound-design-in-web-audio-neurofunk-bass-part-2/
• There are a lot of resources about synthesis, here is a nice one: https://www.gearslutz.com/board/electronic-music-instruments-electronic-music-production/460283-how-do-you-synthesize-808-ish-drums.html

License

MIT License