start to organize the code better
This commit is contained in:
parent
015127af4a
commit
1623cffd67
73
basic.js
73
basic.js
|
|
@ -3,6 +3,8 @@ let gain = null;
|
|||
let selectedWave = "square";
|
||||
let baseFreq = 440;
|
||||
let currentFreq = 261.63;
|
||||
let notes = ["C", "D", "E", "F", "G", "A", "B"];
|
||||
let arpInterval = null;
|
||||
|
||||
function octavehz(hz, octave) {
|
||||
const val = parseFloat(octave);
|
||||
|
|
@ -14,7 +16,7 @@ function noteToHz(note) {
|
|||
case "C":
|
||||
return 261.63;
|
||||
case "D":
|
||||
return 269.66;
|
||||
return 293.66;
|
||||
case "E":
|
||||
return 329.63;
|
||||
case "F":
|
||||
|
|
@ -25,6 +27,8 @@ function noteToHz(note) {
|
|||
return 440;
|
||||
case "B":
|
||||
return 493.88;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,7 +39,6 @@ window.onload = function () {
|
|||
let selectedNoteButton = document.querySelector(
|
||||
"input[name='notechoice']:checked"
|
||||
);
|
||||
console.log("note choice changed to: " + selectedNoteButton.value);
|
||||
let selectedOctaveButton = document.querySelector(
|
||||
"input[name='octavechoice']:checked"
|
||||
);
|
||||
|
|
@ -83,8 +86,20 @@ window.onload = function () {
|
|||
rb.addEventListener("change", updateOscFrequency);
|
||||
});
|
||||
|
||||
// handle keyboard
|
||||
window.addEventListener("keydown", (event) => {
|
||||
if (event.repeat) return;
|
||||
switch (event.key) {
|
||||
// play/stop
|
||||
case "s":
|
||||
{
|
||||
if (osc) {
|
||||
osc.stop();
|
||||
osc = null;
|
||||
}
|
||||
}
|
||||
break;
|
||||
// "piano roll"
|
||||
case "1":
|
||||
selectNote("C");
|
||||
break;
|
||||
|
|
@ -124,6 +139,7 @@ window.onload = function () {
|
|||
}
|
||||
}
|
||||
|
||||
// gain slider
|
||||
const gainSlider = document.getElementById("gain");
|
||||
const gainDisplay = document.getElementById("gainDisplay");
|
||||
gainSlider.addEventListener("input", () => {
|
||||
|
|
@ -133,6 +149,7 @@ window.onload = function () {
|
|||
gainDisplay.textContent = level;
|
||||
});
|
||||
|
||||
// start button
|
||||
document.getElementById("start").addEventListener("click", () => {
|
||||
if (!osc) {
|
||||
osc = audioContext.createOscillator();
|
||||
|
|
@ -143,7 +160,6 @@ window.onload = function () {
|
|||
gain = audioContext.createGain();
|
||||
}
|
||||
|
||||
console.log(selectedWave);
|
||||
osc.type = selectedWave;
|
||||
osc.frequency.setValueAtTime(currentFreq, audioContext.currentTime);
|
||||
gain.gain.setTargetAtTime(
|
||||
|
|
@ -157,22 +173,45 @@ window.onload = function () {
|
|||
audioContext.resume();
|
||||
});
|
||||
|
||||
// stop button
|
||||
document.getElementById("stop").addEventListener("click", () => {
|
||||
osc.stop();
|
||||
osc = null;
|
||||
});
|
||||
|
||||
document.getElementById("arp").addEventListener("click", () => {
|
||||
const notes = ["C", "D", "E", "F", "G", "A", "B"];
|
||||
for (let i = 0; i < notes.length; i++) {
|
||||
for (let j = 0; j < 1000; j++) {
|
||||
let x = 100;
|
||||
if (osc) {
|
||||
osc.stop();
|
||||
osc = null;
|
||||
if (arpInterval) {
|
||||
clearInterval(arpInterval);
|
||||
arpInterval = null;
|
||||
}
|
||||
console.log(notes[i]);
|
||||
osc.frequency.setValueAtTime(
|
||||
noteToHz(notes[i]),
|
||||
audioContext.currentTime
|
||||
);
|
||||
} else {
|
||||
console.log("no osc to stop");
|
||||
}
|
||||
});
|
||||
|
||||
// arp - work in progress
|
||||
function startArp() {
|
||||
if (!arpInterval) {
|
||||
baseNote = "C";
|
||||
let currentOctave = -2;
|
||||
if (osc) {
|
||||
arpInterval = setInterval(() => {
|
||||
if (currentOctave > 2) {
|
||||
currentOctave = -2;
|
||||
}
|
||||
|
||||
let noteFreq = noteToHz(baseNote);
|
||||
let freqOctaveChoice = octavehz(noteFreq, currentOctave);
|
||||
osc.frequency.setValueAtTime(
|
||||
freqOctaveChoice,
|
||||
audioContext.currentTime
|
||||
);
|
||||
|
||||
currentOctave++;
|
||||
}, 100);
|
||||
} else {
|
||||
console.log("no osc to run arp on");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("arp").addEventListener("click", startArp);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ function octavehz(hz: number, octave: string): number {
|
|||
return hz * 2 ** val;
|
||||
}
|
||||
|
||||
function noteToHz(note: string): number | undefined {
|
||||
function noteToHz(note: string): number {
|
||||
switch (note) {
|
||||
case "C":
|
||||
return 261.63;
|
||||
|
|
@ -25,11 +25,13 @@ function noteToHz(note: string): number | undefined {
|
|||
return 440;
|
||||
case "B":
|
||||
return 493.88;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
const audioContext = new AudioContext();
|
||||
const audioContext: AudioContext = new AudioContext();
|
||||
|
||||
function updateOscFrequency() {
|
||||
let selectedNoteButton = document.querySelector(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<title>simple-synth</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="synth.js"></script>
|
||||
|
||||
<div>
|
||||
<form style="padding: 15px">
|
||||
<legend>Voice 1</legend>
|
||||
<input type="radio" id="wave1_sinwave" name="wavechoice1" value="sine" checked>
|
||||
<label for="wave1_sinwave">Sine</label>
|
||||
<input type="radio" id="wave1_squarewave" name="wavechoice1" value="square">
|
||||
<label for="wave1_squarewave">Square</label>
|
||||
<input type="radio" id="wave1_triwave" name="wavechoice1" value="triangle">
|
||||
<label for="wave1_triwave">Triangle</label>
|
||||
<input type="radio" id="wave1_sawtoothwave" name="wavechoice1" value="sawtooth">
|
||||
<label for="wave1_sawtoothwave">Sawtooth</label>
|
||||
</form>
|
||||
<button id="activateVoice1">Start</button>
|
||||
</div>
|
||||
|
||||
<form style="padding: 15px">
|
||||
<legend>Voice 2</legend>
|
||||
<input type="radio" id="wave2_sinwave" name="wavechoice2" value="sine" checked>
|
||||
<label for="wave2_sinwave">Sine</label>
|
||||
<input type="radio" id="wave2_squarewave" name="wavechoice2" value="square">
|
||||
<label for="wave2_squarewave">Square</label>
|
||||
<input type="radio" id="wave2_triwave" name="wavechoice2" value="triangle">
|
||||
<label for="wave2_triwave">Triangle</label>
|
||||
<input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
|
||||
<label for="wave2_sawtoothwave">Sawtooth</label>
|
||||
</form>
|
||||
<button id="activateVoice2">Start</button>
|
||||
|
||||
|
||||
<form style="padding: 15px">
|
||||
<fieldset>
|
||||
<legend>Keyboard</legend>
|
||||
<input type="radio" id="noteC" name="notechoice" value="C" checked>
|
||||
<label for="C">C</label>
|
||||
|
||||
<input type="radio" id="noteD" name="notechoice" value="D">
|
||||
<label for="D">D</label>
|
||||
|
||||
<input type="radio" id="noteE" name="notechoice" value="E">
|
||||
<label for="E">E</label>
|
||||
|
||||
<input type="radio" id="noteF" name="notechoice" value="F">
|
||||
<label for="F">F</label>
|
||||
|
||||
<input type="radio" id="noteG" name="notechoice" value="G">
|
||||
<label for="G">G</label>
|
||||
|
||||
<input type="radio" id="noteA" name="notechoice" value="A">
|
||||
<label for="A">A</label>
|
||||
|
||||
<input type="radio" id="noteB" name="notechoice" value="B">
|
||||
<label for="B">B</label>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<form style="padding: 15px">
|
||||
<fieldset>
|
||||
<legend>Octave Selection</legend>
|
||||
<input type="radio" id="minus2" name="octavechoice" value="-2">
|
||||
<label for="minus2">-2</label>
|
||||
|
||||
<input type="radio" id="minus1" name="octavechoice" value="-1">
|
||||
<label for="minus1">-1</label>
|
||||
|
||||
<input type="radio" id="plus0" name="octavechoice" value="0" checked>
|
||||
<label for="plus0">0</label>
|
||||
|
||||
<input type="radio" id="plus1" name="octavechoice" value="1">
|
||||
<label for="plus1">+1</label>
|
||||
|
||||
<input type="radio" id="plus2" name="octavechoice" value="2">
|
||||
<label for="plus2">+2</label>
|
||||
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
||||
<div style="padding: 15px">
|
||||
<button id="start">Start</button>
|
||||
<button id="stop">Stop</button>
|
||||
<button id="arp">Arp</button>
|
||||
<div style="padding: 10px;">
|
||||
<label for="gain">Volume</label>
|
||||
<input id="gain" type="range" min="0" max=".1" value=".05" step=".001"/>
|
||||
<span id="gainDisplay">.5</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
class Synth {
|
||||
constructor() {
|
||||
this.audioContext = new AudioContext();
|
||||
this.oscillators = [];
|
||||
this.gain = this.audioContext.createGain();
|
||||
this.gain.connect(this.audioContext.destination);
|
||||
}
|
||||
|
||||
createOscillator(type = "sine", freq = 440) {
|
||||
const osc = this.audioContext.createOscillator();
|
||||
osc.type = type;
|
||||
osc.frequency.setValueAtTime(freq, this.audioContext.currentTime);
|
||||
this.gain.gain.setTargetAtTime(0.5, this.audioContext.currentTime, 0);
|
||||
osc.connect(this.gain);
|
||||
this.gain.connect(this.audioContext.destination);
|
||||
this.oscillators.push(osc);
|
||||
return osc;
|
||||
}
|
||||
|
||||
startOsc(osc) {
|
||||
osc.start();
|
||||
}
|
||||
|
||||
stopOsc(osc) {
|
||||
osc.stop();
|
||||
const index = this.oscillators.indexOf(osc);
|
||||
if (index !== -1) {
|
||||
this.oscillators.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
stopAll() {
|
||||
for (let osc of this.oscillators) {
|
||||
this.stopOsc(osc);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hzoctave(freq, octave) {
|
||||
return freq * 2 ** octave;
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
let synth = new Synth();
|
||||
let osc1 = synth.createOscillator("square", hzoctave(440, -1));
|
||||
let osc2 = synth.createOscillator("square", hzoctave(440, -1) - 2);
|
||||
// start button
|
||||
|
||||
document.getElementById("activateVoice1").addEventListener("click", () => {
|
||||
console.log("voice 1 start clicked");
|
||||
synth.audioContext.resume();
|
||||
synth.startOsc(osc1);
|
||||
});
|
||||
|
||||
document.getElementById("activateVoice2").addEventListener("click", () => {
|
||||
console.log("voice 2 start clicked");
|
||||
synth.audioContext.resume();
|
||||
synth.startOsc(osc2);
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue