The signal generator's default output tone is a sine wave of frequency 1000Hz (or 1kHz), and amplitude of just 1%. Please be careful not to increase the amplitude level too high so as to damage your audio equipment, or worse your hearing.



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.

i4cy Signal Generator

Frequency
Hz
Amplitude
%
Waveform

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 (2020).
// A simple audio frequency signal generator using Mozilla web audio.
//
class SignalGenerator {

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

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

        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();
    }

    // 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 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 on this page invokes calls to this class library enabling all the functions on the signal generator to be played by the hardware.

            
              
// Instantiate signal generator with default output.
let signal_generator = new SignalGenerator(1000.0, 1.0, "sine");

// Retrieve current frequency and amplitude.
var freq_value = signal_generator.getFreq();
var ampl_value = signal_generator.getAmpl();

            
          

As a simple example, the javascript class above is invoked here to generate a sinewave tone with a frequency of 1000 cycles per second (or 1kHz) and an amplitude of 1%.

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.