How to change oscillator frequency?

Question

I started to experiment with the Web Audio API, trying to create different oscillators to produce acoustic waves.

Since I'm kinda new to the whole process, I'm wondering if there's a way to play tones, not with a constant frequency, but changing them midways.

Example: I want a tone, that starts at 300 Hz for 3 seconds, and then raise linearly to 400 Hz over the next 4 seconds.

I fount this, but I'm not really sure if it is what I'm looking for:

osc.setPeriodicWave(wave);

My JavaScript so far:

$(document).ready(function() {

// Function that plays the tone.
var playTone = function(duration, frequency) {
var context = new(window.AudioContext || window.webkitAudioContext)();
var osc = context.createOscillator(); 
// Sine is the default type. Also available: square, sawtooth and triangle waveforms.
osc.type = 'sine'; 
// Frequency in Hz.
osc.frequency.value = frequency; // Frequency in Hz
osc.connect(context.destination); 
osc.start(context.currentTime);
osc.stop(context.currentTime + duration);
}

// Button and input functionality.
$("button").on("click", function() {

var whichButton = $(this).text()
var duration = document.getElementById("durationInput").value;
var frequency = document.getElementById("f1Input").value;
if (whichButton == "  Play") {
  playTone(duration, frequency); 
}

});

});

My codepen with the work so far: Codepen.io - Acoustic wave generator

Answer 1

You don't want a PeriodicWave - that's for harmonic (additive) synthesis.

This is pretty straightforward - you just need to use the frequency AudioParam's scheduling methods "setValueAtTime" and "linearRampToValueAtTime". Try this:

// Function that plays the tone.
var playTone = function(duration, frequency) {
    var context = new(window.AudioContext || window.webkitAudioContext)();
    var osc = context.createOscillator(); 
    // Sine is the default type. Also available: square, sawtooth and triangle waveforms.
    osc.type = 'sine'; 
    var now = context.currentTime;
    // Frequency in Hz.
    // Set initial value. (you can use .value=freq if you want)
    osc.frequency.setValueAtTime(frequency, now);
    // set a "checkpoint" in 3 seconds - that will be the starting point of the ramp.
    osc.frequency.setValueAtTime(frequency, now+3);
    // set a ramp to freq+100Hz over the next 4 seconds.
    osc.frequency.linearRampToValueAtTime(frequency+100,now+7)
    osc.connect(context.destination); 
    osc.start(now);
    osc.stop(now + duration);
}