jsfxr: synthesizing sounds in the browser

Access this browser-based synthesizer here: https://sfxr.me/

Sfxr was programmed by Tomas Pettersson, and ported to JavaScript by Eric Fredricksen. Forked and improved by Chris McCormick

First point: make sure that you select 44k and 16 bit in the column on the right for maximum sound quality (unless you are deliberately going for the old-school vibe).

Second point: this synthesizer doesn't protect you. The audio it outputs may contain clicks. Be SURE to edit out any clicks, and beware of clipping as well.

The concept is to pass the output of a basic oscillator through an envelope and a few effects to generate a sound. Every time you change a parameter, the sound will be played so that you can audition it.

Parameters and functions provided in jsfxr:

1. Base waveform
2. Envelope
3. Frequency
4. Vibrato
5. Arpeggiation (second pitch)
6. Duty cycle
7. Retrigger
8. Flanger
9. Low-pass filter
10. High-pass filter
11. serialize/deserialize (get settings as text, load settings from text)
12. Buttons (mutate, random, etc.)

The random button randomizes all of the parameter settings, likely creating a totally new sound.

This column contains buttons for presets, which load parameter settings for sounds that correspond to the labels. After loading them, you can adjust the parameters to customize the sound.

The mutate button slightly changes all of the parameter settings, creating a variation of the previous settings.

This section of the interface allows you to really customize the sound and control the parameters of synthesis.

The base waveform at the top of the interface describes what initial oscillator will be used. This decides the original characteristic of the sound.

1. square https://en.wikipedia.org/wiki/Square_wave
2. sawtooth https://en.wikipedia.org/wiki/Sawtooth_wave
3. sine https://en.wikipedia.org/wiki/Sine_wave
4. noise https://en.wikipedia.org/wiki/White_noise

We've discussed envelope here. This envelope control doesn't have a “release” parameter, but it has an extra “sustain punch” parameter.

There are four frequency parameters:

1. start frequency
2. min freq. cutoff
3. slide
4. delta slide

Vibrato is a kind of wobble to the frequency. https://en.wikipedia.org/wiki/Vibrato

Vibrato has two parameters, and you'll need to raise both to hear this effect:

1. depth
2. speed

Arpeggiation repeats the sound at a new frequency, delayed in time. Most musical arpeggiators will repeat many times, but this one only adds one repeat.

Arpeggiation has two parameters:

1. frequency mult
2. change speed

Duty cycle refers to how wide the high-amplitude portion of a period of the wave is. Notice that duty cycle is grayed-out for sine and noise waveforms. You notice its effect more on the square wave. Duty cycle has two parameters:

1. duty cycle as a percentage; you may feel that the higher the percentage, the “fatter” the sound
2. sweep as a percentage per second; the same seems to be true here: the higher the percentage, the fatter the sound. the lower the percentage, the more high-end details emerge.

Retrigger is a buggy one, I think. It's supposed to make the sound repeat many times quickly. I could only get it to work from around 10.8 Hz and above. Retrigger has only one parameter:

1. rate, expressed in Hz; the higher the rate, the more quickly it retriggers

A flanger is an effect that sounds like sweeping or swishing, and it's produced by using a sound and a copy of the sound.

Flanger has two parameters:

1. offset: the bigger the offset, the more pronounced the effect becomes.
2. sweep: introduces change over time, so that you get that “jet crossing the sky” effect particularly at around 4 msec/sec.

A low-pass filter cuts high frequencies. The low-pass filter has three parameters:

1. cutoff frequency: sounds below this frequency are preserved; sounds above it are reduced
2. cutoff sweep: creates an envelope on the cutoff frequency, reducing it over time. The time specified is how long it takes the cutoff frequency to fall to its minimum value. Keep in mind the amplitude envelope; long values here may not be audible if the amplitude envelope is short.
3. resonance: how strongly the frequency range near the cutoff frequency is boosted

A high-pass filter cuts low frequencies. The high-pass filter has two parameters:

1. cutoff frequency: sounds above this frequency are preserved; sounds below it are reduced
2. cutoff sweep: creates an envelope on the cutoff frequency, reducing it over time. The time specified is how long it takes the cutoff frequency to fall to its minimum value. Keep in mind the amplitude envelope; long values here may not be audible if the amplitude envelope is short.