97 lines
2.4 KiB
JavaScript
97 lines
2.4 KiB
JavaScript
class Synth {
|
|
constructor(audioContext, waveType = "triangle", frequency = 100) {
|
|
this.audioContext = audioContext;
|
|
this.oscWaveType = waveType;
|
|
this.oscFrequency = frequency;
|
|
this.isPlaying = false;
|
|
|
|
// osc setup
|
|
this.osc = this.audioContext.createOscillator();
|
|
this.osc.type = this.oscWaveType;
|
|
this.osc.frequency.setValueAtTime(this.oscFrequency, this.audioContext.currentTime);
|
|
this.osc.connect(this.audioContext.destination);
|
|
}
|
|
|
|
setOscWaveType(type) {
|
|
this.oscWaveType = type;
|
|
this.osc.type = this.oscWaveType;
|
|
}
|
|
|
|
setOscFrequency(freq) {
|
|
this.oscFrequency = freq;
|
|
this.osc.frequency.setValueAtTime(freq, this.audioContext.currentTime);
|
|
}
|
|
|
|
setOscDetune(amount) {
|
|
this.osc.detune.setValueAtTime(amount, this.audioContext.currentTime);
|
|
}
|
|
|
|
startOsc() {
|
|
this.osc.start();
|
|
this.isPlaying = true;
|
|
}
|
|
|
|
stopOsc() {
|
|
// first get all the parameters for this osc
|
|
let currentFreq = this.osc.frequency.value;
|
|
let currentType = this.osc.type;
|
|
|
|
this.osc.stop();
|
|
this.osc = this.audioContext.createOscillator();
|
|
this.osc.type = currentType;
|
|
this.osc.frequency.setValueAtTime(currentFreq, this.audioContext.currentTime);
|
|
this.osc.connect(this.audioContext.destination);
|
|
this.isPlaying = false;
|
|
}
|
|
|
|
toggleOsc() {
|
|
if (this.isPlaying === false) {
|
|
this.startOsc();
|
|
} else {
|
|
this.stopOsc();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
let globalAudioContext = new AudioContext();
|
|
let synth = new Synth(globalAudioContext);
|
|
|
|
function toggleOscillator() {
|
|
synth.toggleOsc();
|
|
}
|
|
window.onload = function() {
|
|
console.log("hello world!");
|
|
console.log(synth);
|
|
|
|
|
|
var waveTypeChoicesButtons = document.querySelectorAll("input[name='wave']");
|
|
// waveTypeChoicesButtons.forEach((radio) => {
|
|
// radio.addEventListener("change", (event) => {
|
|
// if (event.target.checked) {
|
|
// let selectedWaveType = event.target.value;
|
|
// synth.setOscWaveType(selectedWaveType);
|
|
// }
|
|
// })
|
|
// })
|
|
|
|
waveTypeChoicesButtons.forEach((rb) => {
|
|
rb.addEventListener("change", (event) => {
|
|
let selectedWave = document.querySelector("input[name='wave']:checked").value;
|
|
synth.setOscWaveType(selectedWave);
|
|
})
|
|
})
|
|
|
|
|
|
|
|
console.info(waveTypeChoicesButtons);
|
|
console.log("the selected wave:" + waveTypeChoicesButtons);
|
|
var detune = document.getElementById("detune");
|
|
detune.addEventListener("input", () => {
|
|
synth.setOscDetune(parseFloat(detune.value))
|
|
})
|
|
}
|
|
|
|
|
|
|