You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
2.1 KiB
JavaScript
50 lines
2.1 KiB
JavaScript
1 month ago
|
let ac = new AudioContext();
|
||
|
|
|
||
|
|
// There are four main audio nodes in our webaudio API patchbay
|
||
|
|
// The primary oscillator + the modulating oscillator.
|
||
|
|
// The amplitude of the modulation oscillator (its 'depth') is modified by passing the output through a GainNode.
|
||
|
|
// Another GainNode controls the main volume.
|
||
|
|
let oscillator = ac.createOscillator();
|
||
|
|
let modulator = ac.createOscillator();
|
||
|
|
let modulation_gain = ac.createGain();
|
||
|
|
let main_gain = ac.createGain();
|
||
|
|
|
||
|
|
// Make the patches!
|
||
|
|
modulator.connect(modulation_gain);
|
||
|
|
modulation_gain.connect(oscillator.frequency);
|
||
|
|
oscillator.connect(main_gain);
|
||
|
|
main_gain.connect(ac.destination);
|
||
|
|
|
||
|
|
// Once an OscillatorNode is stopped it cannot be restarted.
|
||
|
|
// We turn both oscillators on from the beginning,
|
||
|
|
// and achieve the on/off effect by modifying the main gain.
|
||
|
|
oscillator.start(0);
|
||
|
|
modulator.start(0);
|
||
|
|
|
||
|
|
// inputs
|
||
|
|
let freq_input = document.querySelector("#freq");
|
||
|
|
let modfreq_input = document.querySelector("#modfreq")
|
||
|
|
let moddepth_input = document.querySelector("#moddepth")
|
||
|
|
let vol_input = document.querySelector("#vol");
|
||
|
|
let power_checkbox = document.querySelector("#power");
|
||
|
|
let waveform_select = document.querySelector("#waveform");
|
||
|
|
|
||
|
|
oscillator.frequency.value = freq_input.value;
|
||
|
|
modulation_gain.gain.value = moddepth_input.value;
|
||
|
|
modulator.frequency.value = modfreq_input.value;
|
||
|
|
main_gain.gain.value = power_checkbox.checked ? vol_input.value : 0;
|
||
|
|
|
||
|
|
freq_input.addEventListener("input", e => { oscillator.frequency.value = freq_input.value; });
|
||
|
|
power_checkbox.addEventListener("change", e => {
|
||
|
|
main_gain.gain.value = power_checkbox.checked ? vol_input.value : 0;
|
||
|
|
// check if context is in suspended state (autoplay policy)
|
||
|
|
if (ac.state === "suspended") { ac.resume(); }
|
||
|
|
});
|
||
|
|
modfreq_input.addEventListener("input", e => { modulator.frequency.value = modfreq_input.value });
|
||
|
|
moddepth_input.addEventListener("input", e => { modulation_gain.gain.value = moddepth_input.value });
|
||
|
|
vol_input.addEventListener("input", e => { main_gain.gain.value = power_checkbox.checked ? vol_input.value : 0 });
|
||
|
|
|
||
|
|
oscillator.type = waveform_select.value;
|
||
|
|
waveform_select.addEventListener("input", e => {
|
||
|
|
oscillator.type = waveform_select.value;
|
||
|
|
});
|