471 lines
14 KiB
JavaScript
471 lines
14 KiB
JavaScript
let canvas;
|
|
let analyserNode;
|
|
let signalData;
|
|
let masterVolume;
|
|
|
|
function noteToHz(note) {
|
|
switch (note) {
|
|
case "C":
|
|
return 261.63;
|
|
case "C#":
|
|
case "Db":
|
|
return 277.18;
|
|
case "D":
|
|
return 293.66;
|
|
case "D#":
|
|
case "Eb":
|
|
return 311.13;
|
|
case "E":
|
|
return 329.63;
|
|
case "F":
|
|
return 349.23;
|
|
case "F#":
|
|
case "Gb":
|
|
return 369.99;
|
|
case "G":
|
|
return 392.0;
|
|
case "G#":
|
|
case "Ab":
|
|
return 415.3;
|
|
case "A":
|
|
return 440.0;
|
|
case "A#":
|
|
case "Bb":
|
|
return 466.16;
|
|
case "B":
|
|
return 493.88;
|
|
default:
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
function composeChord(chord) {
|
|
switch (chord) {
|
|
case "C":
|
|
return ["C", "E", "G"]; // C Major
|
|
case "Cm":
|
|
return ["C", "D#", "G"]; // C Minor
|
|
case "Cdim":
|
|
return ["C", "D#", "F#"]; // C Diminished
|
|
case "Caug":
|
|
return ["C", "E", "G#"]; // C Augmented
|
|
case "D":
|
|
return ["D", "F#", "A"]; // D Major
|
|
case "Dm":
|
|
return ["D", "F", "A"]; // D Minor
|
|
case "Ddim":
|
|
return ["D", "F", "G#"]; // D Diminished
|
|
case "Daug":
|
|
return ["D", "F#", "A#"]; // D Augmented
|
|
case "E":
|
|
return ["E", "G#", "B"]; // E Major
|
|
case "Em":
|
|
return ["E", "G", "B"]; // E Minor
|
|
case "Edim":
|
|
return ["E", "G", "A#"]; // E Diminished
|
|
case "Eaug":
|
|
return ["E", "G#", "C"]; // E Augmented
|
|
case "F":
|
|
return ["F", "A", "C"]; // F Major
|
|
case "Fm":
|
|
return ["F", "G#", "C"]; // F Minor
|
|
case "Fdim":
|
|
return ["F", "G#", "A#"]; // F Diminished
|
|
case "Faug":
|
|
return ["F", "A", "C#"]; // F Augmented
|
|
case "G":
|
|
return ["G", "B", "D"]; // G Major
|
|
case "Gm":
|
|
return ["G", "A#", "D"]; // G Minor
|
|
case "Gdim":
|
|
return ["G", "A#", "C#"]; // G Diminished
|
|
case "Gaug":
|
|
return ["G", "B", "D#"]; // G Augmented
|
|
case "A":
|
|
return ["A", "C#", "E"]; // A Major
|
|
case "Am":
|
|
return ["A", "C", "E"]; // A Minor
|
|
case "Adim":
|
|
return ["A", "C", "D#"]; // A Diminished
|
|
case "Aaug":
|
|
return ["A", "C#", "F"]; // A Augmented
|
|
case "B":
|
|
return ["B", "D#", "F#"]; // B Major
|
|
case "Bm":
|
|
return ["B", "D", "F#"]; // B Minor
|
|
case "Bdim":
|
|
return ["B", "D", "F"]; // B Diminished
|
|
case "Baug":
|
|
return ["B", "D#", "G"]; // B Augmented
|
|
default:
|
|
return ["C", "E", "G"]; // Default to C Major
|
|
}
|
|
}
|
|
|
|
class Synth {
|
|
constructor(audioContext) {
|
|
this.audioContext = audioContext;
|
|
this.gain = this.audioContext.createGain();
|
|
this.oscillators = [
|
|
this.createOscillator("sine", 261.63, 0),
|
|
this.createOscillator("sine", 261.63, 0),
|
|
this.createOscillator("sine", 261.63, 0),
|
|
];
|
|
this.gain.connect(this.audioContext.destination);
|
|
}
|
|
|
|
createOscillator(type = "sine", freq = 440, startOctave) {
|
|
const osc = this.audioContext.createOscillator();
|
|
const gainNode = this.audioContext.createGain();
|
|
const filterNode = this.audioContext.createBiquadFilter();
|
|
|
|
osc.type = type;
|
|
osc.frequency.setValueAtTime(freq, this.audioContext.currentTime);
|
|
|
|
filterNode.tupe = "lowpass";
|
|
filterNode.Q.setValueAtTime(100, this.audioContext.currentTime);
|
|
filterNode.frequency.setValueAtTime(5000, this.audioContext.currentTime);
|
|
|
|
// osc --> filter --> gain (voice) --> destination
|
|
// \--> gain (master) --^
|
|
osc.connect(filterNode);
|
|
filterNode.connect(gainNode);
|
|
gainNode.connect(this.audioContext.destination);
|
|
filterNode.connect(this.gain);
|
|
|
|
// connect it to the gain node
|
|
this.gain.gain.setTargetAtTime(0.1, this.audioContext.currentTime, 0);
|
|
gainNode.gain.setTargetAtTime(0.05, this.audioContext.currentTime, 0);
|
|
|
|
// wrap around the container and add to array
|
|
const oscContainer = {
|
|
osc,
|
|
isPlaying: false,
|
|
baseFreq: freq,
|
|
currentOctave: startOctave,
|
|
gainNode,
|
|
filterNode,
|
|
};
|
|
return oscContainer;
|
|
}
|
|
|
|
startOsc(oscContainer) {
|
|
if (!oscContainer.isPlaying) {
|
|
oscContainer.osc.start();
|
|
oscContainer.isPlaying = true;
|
|
}
|
|
}
|
|
|
|
// the web-audio api destroys an osc when it is stopped, therefore we must create a new one
|
|
// in its place and set it up as we first do when creating one
|
|
stopOsc(oscContainer) {
|
|
if (oscContainer.isPlaying) {
|
|
let currentFreq = oscContainer.baseFreq;
|
|
let currentType = oscContainer.osc.type;
|
|
let currentOctave = oscContainer.currentOctave;
|
|
oscContainer.osc.stop();
|
|
|
|
let newOsc = this.createOscillator(currentType, currentFreq, currentOctave);
|
|
oscContainer.osc = newOsc.osc;
|
|
oscContainer.gainNode = newOsc.gainNode;
|
|
oscContainer.filterNode = newOsc.filterNode;
|
|
oscContainer.isPlaying = false;
|
|
oscContainer.baseFreq = currentFreq;
|
|
oscContainer.currentOctave = currentOctave;
|
|
}
|
|
}
|
|
|
|
stopAll() {
|
|
for (let osc of this.oscillators) {
|
|
this.stopOsc(osc);
|
|
}
|
|
}
|
|
|
|
updateFilter(osc, freq, Q) {
|
|
osc.filterNode.frequency.setValueAtTime(
|
|
freq,
|
|
this.audioContext.currentTime
|
|
);
|
|
osc.filterNode.Q.setValueAtTime(Q, this.audioContext.currentTime);
|
|
}
|
|
}
|
|
|
|
let audioConext = new AudioContext();
|
|
let synth = new Synth(audioConext);
|
|
|
|
function updateFrequency(
|
|
event,
|
|
synth,
|
|
oscContainer,
|
|
voiceIndex,
|
|
note,
|
|
octaveShift,
|
|
detuneAmount
|
|
) {
|
|
let baseFreq = oscContainer.baseFreq;
|
|
let currentFreq = baseFreq;
|
|
|
|
if (octaveShift) {
|
|
if (octaveShift === "up") {
|
|
currentFreq = baseFreq * 2;
|
|
oscContainer.baseFreq = currentFreq;
|
|
} else {
|
|
currentFreq = baseFreq / 2;
|
|
oscContainer.baseFreq = currentFreq;
|
|
}
|
|
}
|
|
|
|
if (note) {
|
|
let noteInHz = noteToHz(note);
|
|
// if the note in hz is not in the octave the oscillator is currently at
|
|
// I will need to transform it down to the correct octave.
|
|
currentFreq = noteInHz;
|
|
oscContainer.baseFreq = noteInHz;
|
|
oscContainer.currentOctave = 0;
|
|
let octaveDisplay = document.getElementById(
|
|
"octavedisplay" + (voiceIndex + 1)
|
|
);
|
|
console.log(octaveDisplay);
|
|
console.log("octavedisplay" + (voiceIndex + 1));
|
|
octaveDisplay.value = 0;
|
|
console.log(noteInHz);
|
|
console.log("current octave for voice: " + oscContainer.currentOctave);
|
|
}
|
|
|
|
if (detuneAmount) {
|
|
currentFreq = currentFreq + detuneAmount;
|
|
}
|
|
|
|
console.log(currentFreq);
|
|
|
|
oscContainer.osc.frequency.setValueAtTime(
|
|
currentFreq,
|
|
synth.audioContext.currentTime
|
|
);
|
|
}
|
|
|
|
function updateVolume(event, synth, oscIndex, masterVolume, voiceVolume) {}
|
|
|
|
function setupOctaveControls(voiceIndex, synth) {
|
|
// Get the display element for the current voice
|
|
let octaveDisplay = document.getElementById(
|
|
"octavedisplay" + (voiceIndex + 1)
|
|
);
|
|
|
|
// Set up event listener for the octave down button for the current voice
|
|
document
|
|
.getElementById("octavedown" + (voiceIndex + 1))
|
|
.addEventListener("click", (event) => {
|
|
const osc = synth.oscillators[voiceIndex];
|
|
osc.currentOctave--;
|
|
octaveDisplay.value = osc.currentOctave;
|
|
updateFrequency(event, synth, osc, voiceIndex, null, "down", null);
|
|
});
|
|
|
|
// Set up event listener for the octave up button for the current voice
|
|
document
|
|
.getElementById("octaveup" + (voiceIndex + 1))
|
|
.addEventListener("click", (event) => {
|
|
const osc = synth.oscillators[voiceIndex];
|
|
osc.currentOctave++;
|
|
octaveDisplay.value = osc.currentOctave;
|
|
updateFrequency(event, synth, osc, voiceIndex, null, "up", null);
|
|
});
|
|
}
|
|
|
|
// onload ------------------------------------------------------------------
|
|
window.onload = function () {
|
|
// start button
|
|
|
|
const voiceIds = ["activateVoice1", "activateVoice2", "activateVoice3"];
|
|
voiceIds.forEach((id, index) => {
|
|
document.getElementById(`${id}`).addEventListener("click", (event) => {
|
|
console.log(`voice: ${id} start clicked`);
|
|
// synth.audioContext.resume();
|
|
let osc = synth.oscillators[index];
|
|
if (osc.isPlaying) {
|
|
synth.stopOsc(osc);
|
|
event.target.textContent = "On";
|
|
event.target.style.backgroundColor = "#2f855a";
|
|
} else {
|
|
synth.startOsc(osc);
|
|
event.target.textContent = "Off";
|
|
event.target.style.backgroundColor = "red";
|
|
}
|
|
});
|
|
});
|
|
|
|
// handle waveform selection
|
|
const waveChoices = ["wavechoice1", "wavechoice2", "wavechoice3"];
|
|
waveChoices.forEach((id, index) => {
|
|
document.querySelectorAll(`input[name='${id}']`).forEach((rb) => {
|
|
rb.addEventListener("change", (event) => {
|
|
let selectedWaveform = document.querySelector(
|
|
`input[name='${id}']:checked`
|
|
).value;
|
|
synth.oscillators[index].osc.type = selectedWaveform;
|
|
});
|
|
});
|
|
});
|
|
|
|
// Loop through each voice and set up its octave control buttons
|
|
for (let i = 0; i < synth.oscillators.length; i++) {
|
|
setupOctaveControls(i, synth); // Call setupOctaveControls for each voice
|
|
}
|
|
// detune
|
|
["1", "2", "3"].forEach((voiceNumber, index) => {
|
|
const detuneSlider = document.getElementById(`detunevoice${voiceNumber}`);
|
|
const detuneDisplay = document.getElementById(
|
|
`detunevoice${voiceNumber}display`
|
|
);
|
|
detuneSlider.addEventListener("input", (event) => {
|
|
let osc = synth.oscillators[index];
|
|
let detune = parseFloat(detuneSlider.value);
|
|
console.log(detune);
|
|
detuneDisplay.textContent = detune;
|
|
updateFrequency(event, synth, osc, index, null, null, detune);
|
|
});
|
|
});
|
|
|
|
// master volume
|
|
const masterVolumeSlider = document.getElementById("mastervol");
|
|
const masterVolumeDisplay = document.getElementById("mastervoldisplay");
|
|
masterVolumeSlider.addEventListener("input", (event) => {
|
|
masterVolume = parseFloat(masterVolumeSlider.value);
|
|
masterVolumeDisplay.textContent = masterVolume;
|
|
synth.gain.gain.setValueAtTime(
|
|
masterVolume,
|
|
synth.audioContext.currentTime
|
|
);
|
|
});
|
|
|
|
const volumeIds = ["volumevoice1", "volumevoice2", "volumevoice3"];
|
|
|
|
volumeIds.forEach((id, index) => {
|
|
let oscillator = synth.oscillators[index];
|
|
|
|
const volSlider = document.getElementById(`${id}`);
|
|
volSlider.setAttribute("max", synth.gain.gain.value);
|
|
const volDisplay = document.getElementById(`${id}` + "display");
|
|
volSlider.addEventListener("input", (event) => {
|
|
let vol = parseFloat(volSlider.value);
|
|
volDisplay.textContent = vol;
|
|
volSlider.value = vol;
|
|
oscillator.gainNode.gain.setValueAtTime(
|
|
vol,
|
|
synth.audioContext.currentTime
|
|
);
|
|
});
|
|
});
|
|
|
|
// handle chord changes
|
|
document.querySelectorAll("input[name='chordchoice']").forEach((rb) => {
|
|
rb.addEventListener("change", (event) => {
|
|
let selectedChord = document.querySelector(
|
|
"input[name='chordchoice']:checked"
|
|
).value;
|
|
let notesForChord = composeChord(selectedChord);
|
|
console.log(notesForChord);
|
|
for (let i = 0; i < synth.oscillators.length; i++) {
|
|
if (synth.oscillators[i].isPlaying) {
|
|
console.log("playing note: " + notesForChord[i] + " on voice: " + i);
|
|
updateFrequency(
|
|
event,
|
|
synth,
|
|
synth.oscillators[i],
|
|
i,
|
|
notesForChord[i],
|
|
null,
|
|
null
|
|
);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// do the viz
|
|
const canvasIds = ["wave1canvas", "wave2canvas", "wave3canvas"];
|
|
|
|
const vizObjects = canvasIds.map((id, index) => {
|
|
const canvas = document.getElementById(id);
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
const analyser = synth.audioContext.createAnalyser();
|
|
analyser.fftSize = 2048;
|
|
|
|
synth.oscillators[index].filterNode.connect(analyser);
|
|
const bufferLength = analyser.fftSize;
|
|
const dataArray = new Uint8Array(bufferLength);
|
|
|
|
return { canvas, ctx, analyser, index, bufferLength, dataArray };
|
|
});
|
|
|
|
function draw() {
|
|
vizObjects.forEach((viz) => {
|
|
viz.analyser.getByteTimeDomainData(viz.dataArray);
|
|
viz.ctx.clearRect(0, 0, viz.canvas.width, viz.canvas.height);
|
|
let voiceVol = synth.oscillators[viz.index].gainNode.gain.value;
|
|
if (masterVolume + voiceVol > 1) {
|
|
viz.ctx.fillStyle = "#ff5d52";
|
|
} else {
|
|
viz.ctx.fillStyle = "black";
|
|
}
|
|
|
|
viz.ctx.fillRect(0, 0, viz.canvas.width, viz.canvas.height);
|
|
viz.ctx.lineWidth = 2;
|
|
viz.ctx.strokeStyle = "rgb(0, 200, 100)";
|
|
|
|
viz.ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
|
|
viz.ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
|
|
viz.ctx.shadowOffsetX = 2;
|
|
viz.ctx.shadowOffsetY = 5;
|
|
|
|
viz.ctx.beginPath();
|
|
|
|
const sliceWidth = (viz.canvas.width * 1.0) / viz.bufferLength;
|
|
let x = 0;
|
|
|
|
for (let i = 0; i < viz.bufferLength; i++) {
|
|
const v = viz.dataArray[i] / 128.0;
|
|
const y = (v * viz.canvas.height) / 2;
|
|
|
|
if (i === 0) {
|
|
viz.ctx.moveTo(x, y);
|
|
} else {
|
|
viz.ctx.lineTo(x, y);
|
|
}
|
|
|
|
x += sliceWidth;
|
|
}
|
|
|
|
viz.ctx.lineTo(viz.canvas.width, viz.canvas.height / 2);
|
|
viz.ctx.stroke();
|
|
});
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
draw();
|
|
|
|
const filterSlider = document.getElementById("filter");
|
|
const filterSliderDisplay = document.getElementById("filterdisplay");
|
|
filterSlider.addEventListener("input", (event) => {
|
|
filtervalue = parseFloat(filterSlider.value);
|
|
filterSliderDisplay.textContent = filtervalue;
|
|
let osc = synth.oscillators[0];
|
|
osc.filterNode.frequency.setValueAtTime(
|
|
filtervalue,
|
|
synth.audioContext.currentTime
|
|
);
|
|
});
|
|
|
|
const QSlider = document.getElementById("Q");
|
|
const QSliderDisplay = document.getElementById("Qdisplay");
|
|
QSlider.addEventListener("input", (event) => {
|
|
Qvalue = parseFloat(QSlider.value);
|
|
QSliderDisplay.textContent = Qvalue;
|
|
let osc = synth.oscillators[0];
|
|
osc.filterNode.Q.setValueAtTime(Qvalue, synth.audioContext.currentTime);
|
|
});
|
|
};
|