Before clicking Unmute button, please check your volume control is not turned too high so as to damage your audio equipment, or worse your hearing. The signal generator's default output tone is a sine wave of frequency 1000Hz (or 1kHz), and amplitude of 50%.

Using the Audio Signal Generator

This virtual signal generator mimics a standard piece of test equipment known as an audio signal generator. As a result it should be straightforward and intuitive to use. The generator outputs a selection of waveforms, with adjustable amplitude, and adjustable frequency within audible hearing range (20Hz to 20kHz). Use the headphone jack on your computer or smartphone as the output source from the signal generator.

Click the Unmute button to start the Signal Generator.

i4cy Signal Generator

Frequency

Amplitude

20 - 200 Hz 200 - 2000 Hz 2 - 20 kHz

Waveform

Sine Square Sawtooth Triangle

Unmute

How it works

The Web Audio API introduced by Mozilla provides a powerful and versatile system for controlling audio on the Web. Since its introduction, most modern web browsers now support this API making it a viable choice for generating signal tones in a web browser. The process of generating audio requires complex low-level real-time code that works closely with the hardware. This functionality has fortunately has been encapsulated within the Web Audio API, making it easy for web developers to generate their own audio tones and effects.

            
              
// Guy Fernando (2022).
// A simple audio frequency signal generator javascript class library for Mozilla web audio.
//
class SignalGenerator {

    // Default constructor.
    //
    constructor(freq, ampl, wave) {

        this.freq = freq;
        this.ampl = ampl;
        this.wave = wave;
        this.mute = false;
        this.started = false;
    }

    // Starts audio (must be called by a user initiated gesture event).
    //
    start() {

        if (!this.started) {

            var AudioContext = window.AudioContext || window.webkitAudioContext;

            let a = new AudioContext({
                latencyHint: 'interactive',
                sampleRate: 44100
            });

            // Create nodes.
            this.o = a.createOscillator();
            this.g = a.createGain();

            // Set parameters.
            this.g.gain.value = this.ampl / 1000.0;
            this.o.frequency.value = this.freq;
            this.o.type = this.wave;

            // Connect 
            this.o.connect(this.g);
            this.g.connect(a.destination);

            // Schedule tone.
            this.o.start();
            this.started = true;
        }
    }

    // Set audio frequency.
    //
    setFreq(freq, range, callback) {

        this.freq = freq;
        this.range = range;
        this.o.frequency.value = parseFloat(this.freq) * Math.pow(10, parseInt(this.range));

        // Callback frequency result in Hz.
        callback(this.o.frequency.value);
    };

    // Set audio amplitude.
    //
    setAmpl(ampl, callback) {

        this.ampl = ampl;

        if (this.mute === false) {

            this.g.gain.value = this.ampl / 1000.0;
        }

        // Callback amplitude result in percent.
        callback(Number(this.ampl).toFixed(0));
    };

    // Set audio waveform.
    //
    setWave(wave) {

        this.wave = wave;
        this.o.type = this.wave;
    };

    // Set audio mute state.
    //
    setMute(mute) {

        this.mute = mute;

        if (this.mute === true) {
            this.g.gain.value = 0;
        }
        else {
            this.g.gain.value = this.ampl / 1000.0;
        }
    }

    // Get audio frequency result in Hz.
    //
    getFreq() {

        return this.freq;
    }

    // Get audio amplitude result in percent.
    //
    getAmpl() {

        return Number(this.ampl.toFixed(0));
    }

    // Get audio waveform.
    //
    getWave(wave) {

        return this.wave;
    };
}

This javascript class library shown here further simplifies the process of generating simple “sine”, “square”, "sawtooth" or “triangle” waveforms, with a specified frequency and amplitude.

The signal generator above uses this class library enabling all the functions on the signal generator to be played by the hardware.

            
              
<!--
  Guy Fernando (2022)
  A simple audio frequency signal generator class library test.
  -->
<html>
<head>
  <script src="js/signalGenerator.js"></script>
  <script>
    let signal_generator = new SignalGenerator(1000.0, 50.0, "sine");
  </script>
</head>
<body>
  <button onclick="signal_generator.start();">Start</button>
</body>
</html>

This simple example shows the class library being used to generate a sinewave tone with a frequency of 1kHz, amplitude of 50% in an HTML page.

Run Code

This Fourier Series article here on i4cy.com describes the sine, square, sawtooth, and triangle waveform shapes produced by the signal generator, and explains in detail the mathematical relationship of each of waveform.