Interactive Examples
Try these live demos built with rescript-tone and xote. Click "Start Audio" to initialize the Web Audio context, then interact with each demo.
Synth Keyboard
Synth Keyboard
Click a key to play a note. Choose different waveforms to change the timbre.
1open Tone23let synth = Synth.makeWithOptions({4 oscillator: {"type": "triangle"},5 envelope: {6 attack: 0.01, decay: 0.2,7 sustain: 0.3, release: 0.8,8 },9})10synth->Synth.asAudioNode->AudioNode.toDestination1112synth->Synth.triggerAttackRelease("C4", "8n")Effects Chain
Effects Chain
FM Synth routed through Delay and Reverb. Adjust the wet mix of each effect.
1open Tone23let synth = FMSynth.make()4let reverb = Reverb.makeWithOptions({5 decay: 3.0, wet: 0.5,6})7let delay = FeedbackDelay.makeWithOptions({8 delayTime: "8n.", feedback: 0.3, wet: 0.3,9})1011synth->FMSynth.asAudioNode12->AudioNode.connect(delay->FeedbackDelay.asAudioNode)13->AudioNode.connect(reverb->Reverb.asAudioNode)14->AudioNode.toDestinationStep Sequencer
Step Sequencer
Toggle steps on/off to create a pattern. Uses Loop and Transport for timing.
1open Tone23let synth = Synth.makeWithOptions({4 oscillator: {"type": "square"},5 envelope: {6 attack: 0.01, decay: 0.1,7 sustain: 0.1, release: 0.3,8 },9})10synth->Synth.asAudioNode->AudioNode.toDestination1112let _loop = Loop.make(_time => {13 synth->Synth.triggerAttackRelease("C4", "16n")14}, "8n")1516let transport = Core.getTransport()17transport->Transport.start()Melody Sequencer
Melody Sequencer
Play a looping melody using Sequence and Transport. Adjust the BPM to change the tempo.
1open Tone23let synth = Synth.makeWithOptions({4 oscillator: {"type": "triangle"},5 envelope: {attack: 0.01, decay: 0.1, sustain: 0.3, release: 0.5},6})7synth->Synth.asAudioNode->AudioNode.toDestination89let notes = ["C4", "D4", "E4", "G4", "A4", "G4", "E4", "D4"]1011let _seq = Sequence.makeWithSubdivision(12 (_time, note) => {13 synth->Synth.triggerAttackRelease(note, "8n")14 }, notes, "4n"15)1617let transport = Core.getTransport()18transport->Transport.start()Drum Machine
Drum Machine
A drum sequencer with kick, snare, and hi-hat. Toggle steps on/off to create your own beat.
1open Tone23let kick = Synth.makeWithOptions({4 oscillator: {"type": "sine"},5 envelope: {attack: 0.001, decay: 0.2, sustain: 0.0, release: 0.2},6})7kick->Synth.asAudioNode->AudioNode.toDestination89let snare = Noise.makeWithOptions({"type": "white", volume: -10.0})10snare->Noise.asAudioNode->AudioNode.toDestination1112let hihat = Noise.makeWithOptions({"type": "white", volume: -18.0})13let hpf = Filter.makeWithOptions({frequency: 8000.0, "type": "highpass"})14hihat->Noise.asAudioNode->AudioNode.connect(hpf->Filter.asAudioNode)15hpf->Filter.asAudioNode->AudioNode.toDestination1617let _loop = Loop.make(_time => {18 kick->Synth.triggerAttackRelease("C1", "16n")19}, "8n")2021let transport = Core.getTransport()22transport->Transport.start()Filter Sweep
Filter Sweep
A sawtooth oscillator through a resonant low-pass filter. Sweep the cutoff frequency and resonance.
1open Tone23let osc = Oscillator.makeWithOptions({4 frequency: 110.0,5 "type": "sawtooth",6})78let filter = Filter.makeWithOptions({9 frequency: 500.0,10 "type": "lowpass",11 rolloff: -24,12 q: 1.0,13})1415osc->Oscillator.asAudioNode16->AudioNode.connect(filter->Filter.asAudioNode)17->AudioNode.toDestination1819// Sweep the filter cutoff20filter->Filter.frequency->Param.rampTo(2000.0, "2m")2122osc->Oscillator.start()Polyphonic Chords
Polyphonic Chords
Play chords using PolySynth. Each button triggers multiple notes simultaneously.
1open Tone23let synth = PolySynth.makeWithOptions({4 maxPolyphony: 6,5 volume: -8.0,6})7synth->PolySynth.asAudioNode->AudioNode.toDestination89// Play a C major chord10synth->PolySynth.triggerAttackRelease(11 ["C4", "E4", "G4"], "2n"12)AM Synth Pad
AM Synth Pad
Amplitude Modulation synthesis with reverb. Adjust harmonicity to change the modulation character.
1open Tone23let reverb = Reverb.makeWithOptions({decay: 4.0, wet: 0.6})45let synth = AMSynth.makeWithOptions({6 harmonicity: 3.0,7 oscillator: {"type": "sine"},8 modulation: {"type": "square"},9 envelope: {attack: 0.5, decay: 0.3, sustain: 0.8, release: 1.5},10 modulationEnvelope: {11 attack: 0.2, decay: 0.1, sustain: 0.5, release: 0.8,12 },13})1415synth->AMSynth.asAudioNode16->AudioNode.connect(reverb->Reverb.asAudioNode)17->AudioNode.toDestination1819synth->AMSynth.triggerAttackRelease("C3", "1n")