CODEWITHSUNDEEP
html5-audioweb-audio-api
Zhe Hu
Zhe Hu

Reputation: 4007

web audio api plays beep, beep,... beep at different rate

I am trying to play "beep" sound at different rate based on some sensor readings inside a browser window.

The idea is to "beep, beep, beep, ... beep" faster when the sensor reading is high, and "beep,...beep" slower when the sensor reading is low, all in real-time.

The sensor reading is fed into the browser via socket.io. I can already control a progress bar moving up and down. The audio feedback is an extra feature.

After some googling, I am thinking about using web audio api, creating a sin-wave oscillator, and to turn it on/off with a gain node connect/disconnect.

My question is how do I control the timing in the right way, say I am trying to beep at a range of frequencies from 1 Hz to 20 Hz, and be able to change the frequency dynamically.

Upvotes: 3

Views: 1088

Answers (1)

cwilso
cwilso

Reputation: 13928

I would most specifically NOT turn an oscillator on and off by connecting and disconnecting it - you'd have to do that from the main thread, so not super-predictable.

You can actually do this with a modulating low-frequency oscillator: check out this code:

var context = new AudioContext();

//defaults to A440Hz, sine wave
var src = context.createOscillator();

// Now let's create a modulator to turn beeps on and off
var mod = context.createOscillator();
mod.type="square";
mod.frequency.value = "2";  // Start at 2Hz

var gain = context.createGain();
var scaler = context.createGain();

src.connect(gain);
gain.connect(context.destination);

mod.connect(scaler); // Mod signal is [-1,1]
scaler.gain.value = 0.5; // we need it to be [-0.5,0.5]
gain.gain.value = 0.5; // then it's summed with 0.5, so [0,1]
scaler.connect(gain.gain);

//start it up
src.start(0);
mod.start(0);

// to change rate, change mod.frequency.value to desired frequency

Upvotes: 9

Related Questions