ergz/simple-synth
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ergz:8111ea2daa73053a689aaf26cd2c6a81355025b9
Branches Tags
ergz:main
..
compare: ergz:main
Branches Tags
ergz:main

17 Commits
8111ea2daa ... main

Author SHA1 Message Date
ergz
3273b1e6db make radio buttons happen 2024-02-15 23:57:07 -08:00
ergz
3d85edfc98 more work 2024-02-15 19:58:58 -08:00
ergz
1ac8df3a3f adds a detune slider 2024-02-08 23:18:43 -08:00
ergz
dc1bc9df2d fixes not connected to destination issue 2024-02-08 00:00:13 -08:00
ergz
3cb0784e39 work on synth class 2024-02-07 23:41:04 -08:00
ergz
37eabc79ca work on a simpler version of synth that works and then try to expand that 2024-02-07 23:02:03 -08:00
ergz
80052bb864 remove random file 2023-10-15 00:14:39 -07:00
ergz
1ecac8d4f6 makes the synth be dark 2023-10-14 23:53:18 -07:00
ergz
2d84b91e56 bare bones filter 2023-10-14 02:55:32 -07:00
ergz
7d0a80a987 improves the voice vol + mater vol 2023-10-13 23:31:13 -07:00
ergz
2b5a0453d0 was forgetting to connect the gain node to the destination 2023-10-13 11:42:05 -07:00
ergz
7bed2c6085 renames synth to index 2023-10-13 00:09:28 -07:00
ergz
77af7d2576 add detune to rest of the voices 2023-10-12 23:05:37 -07:00
ergz
3773cfd778 added osc to the rest of the voices 2023-10-12 22:38:55 -07:00
ergz
ae06952e73 added osc to the rest of the voices 2023-10-12 22:38:21 -07:00
ergz
c7c545ab0d added osc visualizer 2023-10-10 23:15:55 -07:00
ergz
22de4dac14 trying to add the waveform, but no luck yet 2023-10-09 23:56:17 -07:00
5 changed files with 636 additions and 270 deletions
Expand all files Collapse all files

243
index-1.html Normal file
View File

@@ -0,0 +1,243 @@
<!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">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>simple-synth</title>
</head>
<body class="bg-gray-900 p-10 mb-5">
<script src="synth.js"></script>
<div class="flex justify-between">
<div class="flex-grow border-2 border-gray-600 rounded-md p-4 m-4">
<form>
<legend class="text-lg text-gray-300 mb-2">Voice 1</legend>
<input type="radio" id="wave1_sinwave" name="wavechoice1" value="sine" checked>
<label class = "text-gray-300" wave1_sinwave">Sine</label>
<input type="radio" id="wave1_squarewave" name="wavechoice1" value="square">
<label class = "text-gray-300" for="wave1_squarewave">Square</label>
<input type="radio" id="wave1_triwave" name="wavechoice1" value="triangle">
<label class = "text-gray-300" for="wave1_triwave">Triangle</label>
<input type="radio" id="wave1_sawtoothwave" name="wavechoice1" value="sawtooth">
<label class = "text-gray-300" for="wave1_sawtoothwave">Sawtooth</label>
</form>
<div class="flex items-center space-x-2 my-3">
<fieldset>
<legend class = "text-gray-300">Octave Selection</legend>
<button id="octavedown1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
<input type="text" id="octavedisplay1" value="0" readonly class="text-center text-sm w-6 border py-2">
<button id="octaveup1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="volumevoice1" class="block text-sm font-medium text-gray-300 mb-1">volume voice</label>
<input id="volumevoice1" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="volumevoice1display" class="text-sm text-gray-300 ml-2">0</span>
</div>
<div style="padding: 5px">
<label for="detunevoice1" class="block text-sm font-medium text-gray-300 mb-1">detune voice</label>
<input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice1display" class="text-sm text-gray-300 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave1viz" class="canvas-container">
<canvas id ="wave1canvas"></canvas>
</div>
</div>
<button id="activateVoice1" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
<div class="flex-grow border-2 border-gray-600 rounded-md p-4 m-4">
<form style="padding: 5px">
<legend class="text-lg text-gray-300 mb-2">Voice 2</legend>
<input type="radio" id="wave2_sinwave" name="wavechoice2" value="sine" checked>
<label class="text-gray-300" for="wave2_sinwave">Sine</label>
<input type="radio" id="wave2_squarewave" name="wavechoice2" value="square">
<label class="text-gray-300" for="wave2_squarewave">Square</label>
<input type="radio" id="wave2_triwave" name="wavechoice2" value="triangle">
<label class="text-gray-300" for="wave2_triwave">Triangle</label>
<input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
<label class="text-gray-300" for="wave2_sawtoothwave">Sawtooth</label>
</form>
<div class="flex items-center space-x-2 my-3">
<fieldset>
<legend class="text-gray-300">Octave Selection</legend>
<button id="octavedown2" class="bg-gray-400 hover:bg-gray-500 text-gray-300 font-bold py-1 px-4">-</button>
<input type="text" id="octavedisplay2" value="0" readonly style="width: 2em; text-align: center;">
<button id="octaveup2" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="volumevoice2" class="block text-sm font-medium text-gray-300 mb-1">volume voice</label>
<input id="volumevoice2" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="volumevoice2display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div style="padding: 5px">
<label for="detunevoice2" class="block text-sm font-medium text-gray-300 mb-1">detune voice</label>
<input id="detunevoice2" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice2display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave2viz" class="canvas-container">
<canvas id ="wave2canvas"></canvas>
</div>
</div>
<button id="activateVoice2" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
<div class="flex-grow border-2 border-gray-600 rounded-md p-4 m-4">
<form style="padding: 5px">
<legend class="text-lg mb-2 text-gray-300">Voice 3</legend>
<input type="radio" id="wave3_sinwave" name="wavechoice3" value="sine" checked>
<label class="text-gray-300" for="wave3_sinwave">Sine</label>
<input type="radio" id="wave3_squarewave" name="wavechoice3" value="square">
<label class="text-gray-300" for="wave3_squarewave">Square</label>
<input type="radio" id="wave3_triwave" name="wavechoice3" value="triangle">
<label class="text-gray-300" for="wave3_triwave">Triangle</label>
<input type="radio" id="wave3_sawtoothwave" name="wavechoice3" value="sawtooth">
<label class="text-gray-300" for="wave3_sawtoothwave">Sawtooth</label>
</form>
<div class="flex items-center space-x-2 my-3">
<fieldset>
<legend class="text-gray-300">Octave Selection</legend>
<button id="octavedown3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
<input type="text" id="octavedisplay3" value="0" readonly style="width: 2em; text-align: center;">
<button id="octaveup3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="volumevoice3" class="block text-sm font-medium text-gray-300 mb-1">volume voice</label>
<input id="volumevoice3" type="range" min="0" max="1" value=".3" step=".01" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="volumevoice3display" class="text-sm text-gray-300 ml-2">0</span>
</div>
<div style="padding: 5px">
<label for="detunevoice3" class="block text-sm font-medium text-gray-300 mb-1">detune voice</label>
<input id="detunevoice3" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice3display" class="text-sm text-gray-300 ml-2">0</span>
</div>
<div class="flex-container flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<div id = "wave3viz" class="canvas-container">
<canvas id ="wave3canvas"></canvas>
</div>
</div>
<button id="activateVoice3" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
</div>
<div style="padding: 5px">
<label for="mastervol" class="block text-sm font-medium text-gray-300 mb-1">Master Volume</label>
<input id="mastervol" type="range" min="0" max=".6" value=".2" step=".01" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="mastervoldisplay" class="text-sm text-gray-300 ml-2">0</span>
</div>
<div>
<label class = "text-gray-300" for="chordscales">Choose Scale:</label>
<select id="chordscales">
<option value="Cscale">C</option>
<option value="Dscale">D</option>
<option value="Esclae">E</option>
</select>
</div>
<div>
<form style="padding: 15px">
<fieldset>
<legend class="text-gray-300">Chords</legend>
<!-- Major Chords -->
<div>
<input type="radio" id="chordC" name="chordchoice" value="C" checked>
<label class="text-gray-300" for="chordC">C</label>
<input type="radio" id="chordD" name="chordchoice" value="D">
<label class="text-gray-300" for="chordD">D</label>
<input type="radio" id="chordE" name="chordchoice" value="E">
<label class="text-gray-300" for="chordE">E</label>
<input type="radio" id="chordF" name="chordchoice" value="F">
<label class="text-gray-300" for="chordF">F</label>
<input type="radio" id="chordG" name="chordchoice" value="G">
<label class="text-gray-300" for="chordG">G</label>
<input type="radio" id="chordA" name="chordchoice" value="A">
<label class="text-gray-300" for="chordA">A</label>
<input type="radio" id="chordB" name="chordchoice" value="B">
<label class="text-gray-300" for="chordB">B</label>
</div>
<div>
<!-- Minor Chords -->
<input type="radio" id="chordCm" name="chordchoice" value="Cm">
<label class="text-gray-300" for="chordCm">Cm</label>
<input type="radio" id="chordDm" name="chordchoice" value="Dm">
<label class="text-gray-300" for="chordDm">Dm</label>
<input type="radio" id="chordEm" name="chordchoice" value="Em">
<label class="text-gray-300" for="chordEm">Em</label>
<input type="radio" id="chordFm" name="chordchoice" value="Fm">
<label class="text-gray-300" for="chordFm">Fm</label>
<input type="radio" id="chordGm" name="chordchoice" value="Gm">
<label class="text-gray-300" for="chordGm">Gm</label>
<input type="radio" id="chordAm" name="chordchoice" value="Am">
<label class="text-gray-300" for="chordAm">Am</label>
<input type="radio" id="chordBm" name="chordchoice" value="Bm">
<label class="text-gray-300" for="chordBm">Bm</label>
</div>
</fieldset>
</form>
</div>
<div style="padding: 5px">
<label for="filter" class="block text-sm font-medium text-gray-300 mb-1">filter</label>
<input id="filter" type="range" min="0" max="900" value="5000" step="1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="filterdisplay" class="text-sm text-gray-300 ml-2">0</span>
</div>
<div style="padding: 5px">
<label for="Q" class="block text-sm font-medium text-gray-300 mb-1">Q</label>
<input id="Q" type="range" min="0" max="100" value="0" step="1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="Qdisplay" class="text-sm text-gray-300 ml-2">0</span>
</div>
</body>
</html>

96
single-voice-synth.js Normal file
View File

@@ -0,0 +1,96 @@
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))
})
}

28
single-voice.html Normal file
View File

@@ -0,0 +1,28 @@
<!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">
<!-- <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> -->
<title>simple-synth</title>
</head>
<body class="bg-gray-900 p-10 mb-5">
<script src="single-voice-synth.js"></script>
<div class="flex justify-between"></div>
<button onclick="toggleOscillator()">Start/Stop</button>
<input type="range" min="-40" max="40" value="0" class="slider" id="detune">
<form>
<input type="radio" id="sine" name="wave" value="sine" checked>
<label for="sine">Sine</label><br>
<input type="radio" id="triangle" name="wave" value="triangle">
<label for="triangle">Triangle</label><br>
<input type="radio" id="square" name="wave" value="square">
<label for="square">Square</label><br>
<input type="radio" id="sawtooth" name="wave" value="sawtooth">
<label for="sawtooth">Sawtooth</label>
</form>
</body>

140
synth.html
View File

@@ -1,140 +0,0 @@
<!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">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>simple-synth</title>
</head>
<body class="bg-gray-100 p-10 mb-5">
<script src="synth.js"></script>
<div class="flex justify-between">
<div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<form>
<legend class="text-lg mb-2">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>
<div class="flex items-center space-x-2 my-3">
<fieldset>
<legend>Octave Selection</legend>
<button id="octavedown1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
<input type="text" id="octavedisplay1" value="0" readonly class="text-center text-sm w-6 border py-2">
<button id="octaveup1" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<div style="padding: 5px">
<label for="detunevoice1" class="block text-sm font-medium text-gray-700 mb-1">detune voice</label>
<input id="detunevoice1" type="range" min="-5" max="5" value="0" step=".1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="detunevoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<div style="padding: 5px">
<label for="filtervoice1" class="block text-sm font-medium text-gray-700 mb-1">filter voice</label>
<input id="filtervoice1" type="range" min="700" max="1500" value="1000" step="1" class="slider bg-gray-300 h-2 rounded-full outline-none"/>
<span id="filtervoice1display" class="text-sm text-gray-700 ml-2">0</span>
</div>
<button id="activateVoice1" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
<div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<form style="padding: 5px">
<legend class="text-lg mb-2">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>
<div class="flex items-center space-x-2 my-3">
<fieldset>
<legend>Octave Selection</legend>
<button id="octavedown2" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
<input type="text" id="octavedisplay2" value="0" readonly style="width: 2em; text-align: center;">
<button id="octaveup2" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<button id="activateVoice2" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
<div class="flex-grow border-2 border-gray-800 rounded-md p-4 m-4">
<form style="padding: 5px">
<legend>Voice 3</legend>
<input type="radio" id="wave3_sinwave" name="wavechoice3" value="sine" checked>
<label for="wave3_sinwave">Sine</label>
<input type="radio" id="wave3_squarewave" name="wavechoice3" value="square">
<label for="wave3_squarewave">Square</label>
<input type="radio" id="wave3_triwave" name="wavechoice3" value="triangle">
<label for="wave3_triwave">Triangle</label>
<input type="radio" id="wave3_sawtoothwave" name="wavechoice3" value="sawtooth">
<label for="wave3_sawtoothwave">Sawtooth</label>
</form>
<div style="padding: 5px">
<fieldset>
<legend>Octave Selection</legend>
<button id="octavedown3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">-</button>
<input type="text" id="octavedisplay3" value="0" readonly style="width: 2em; text-align: center;">
<button id="octaveup3" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-1 px-4">+</button>
</fieldset>
</div>
<button id="activateVoice3" class="bg-green-700 hover:bg-green-600 text-white font-bold text-sm py-1 px-2 rounded">On</button>
</div>
</div>
<div>
<form style="padding: 15px">
<fieldset>
<legend>Chords</legend>
<input type="radio" id="chordC" name="chordchoice" value="C" checked>
<label for="chordC">C</label>
<input type="radio" id="chordD" name="chordchoice" value="D">
<label for="chordD">D</label>
<input type="radio" id="chordE" name="chordchoice" value="E">
<label for="chordE">E</label>
<input type="radio" id="chordF" name="chordchoice" value="F">
<label for="chordF">F</label>
<input type="radio" id="chordG" name="chordchoice" value="G">
<label for="chordG">G</label>
<input type="radio" id="chordA" name="chordchoice" value="A">
<label for="chordA">A</label>
<input type="radio" id="chordB" name="chordchoice" value="B">
<label for="chordB">B</label>
</fieldset>
</form>
</div>
</body>
</html>

399
synth.js
View File

@@ -1,17 +1,37 @@
let canvas;
let analyserNode;
let signalData;
let masterVolume;
function noteToHz(note) { function noteToHz(note) {
switch (note) { switch (note) {
case "C": case "C":
return 261.63; return 261.63;
case "C#":
case "Db":
return 277.18;
case "D": case "D":
return 293.66; return 293.66;
case "D#":
case "Eb":
return 311.13;
case "E": case "E":
return 329.63; return 329.63;
case "F": case "F":
return 349.23; return 349.23;
case "F#":
case "Gb":
return 369.99;
case "G": case "G":
return 392; return 392.0;
case "G#":
case "Ab":
return 415.3;
case "A": case "A":
return 440; return 440.0;
case "A#":
case "Bb":
return 466.16;
case "B": case "B":
return 493.88; return 493.88;
default: default:
@@ -21,36 +41,70 @@ function noteToHz(note) {
function composeChord(chord) { function composeChord(chord) {
switch (chord) { switch (chord) {
case "C": { case "C":
return ["C", "G", "E"]; return ["C", "E", "G"]; // C Major
} case "Cm":
case "D": { return ["C", "D#", "G"]; // C Minor
return ["D", "F", "A"]; case "Cdim":
} return ["C", "D#", "F#"]; // C Diminished
case "E": { case "Caug":
return ["E", "G", "B"]; return ["C", "E", "G#"]; // C Augmented
} case "D":
case "F": { return ["D", "F#", "A"]; // D Major
return ["F", "A", "C"]; case "Dm":
} return ["D", "F", "A"]; // D Minor
case "G": { case "Ddim":
return ["G", "B", "D"]; return ["D", "F", "G#"]; // D Diminished
} case "Daug":
case "A": { return ["D", "F#", "A#"]; // D Augmented
return ["A", "C", "E"]; case "E":
} return ["E", "G#", "B"]; // E Major
case "B": { case "Em":
return ["B", "D", "F"]; return ["E", "G", "B"]; // E Minor
} case "Edim":
default: { return ["E", "G", "A#"]; // E Diminished
return ["C", "D", "E"]; 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 { class Synth {
constructor() { constructor(audioContext) {
this.audioContext = new AudioContext(); this.audioContext = audioContext;
this.gain = this.audioContext.createGain(); this.gain = this.audioContext.createGain();
this.oscillators = [ this.oscillators = [
this.createOscillator("sine", 261.63, 0), this.createOscillator("sine", 261.63, 0),
@@ -62,11 +116,26 @@ class Synth {
createOscillator(type = "sine", freq = 440, startOctave) { createOscillator(type = "sine", freq = 440, startOctave) {
const osc = this.audioContext.createOscillator(); const osc = this.audioContext.createOscillator();
const gainNode = this.audioContext.createGain();
const filterNode = this.audioContext.createBiquadFilter();
osc.type = type; osc.type = type;
osc.frequency.setValueAtTime(freq, this.audioContext.currentTime); 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 // connect it to the gain node
this.gain.gain.setTargetAtTime(0.1, this.audioContext.currentTime, 0); this.gain.gain.setTargetAtTime(0.1, this.audioContext.currentTime, 0);
osc.connect(this.gain); gainNode.gain.setTargetAtTime(0.05, this.audioContext.currentTime, 0);
// wrap around the container and add to array // wrap around the container and add to array
const oscContainer = { const oscContainer = {
@@ -74,6 +143,8 @@ class Synth {
isPlaying: false, isPlaying: false,
baseFreq: freq, baseFreq: freq,
currentOctave: startOctave, currentOctave: startOctave,
gainNode,
filterNode,
}; };
return oscContainer; return oscContainer;
} }
@@ -85,22 +156,22 @@ class Synth {
} }
} }
// 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) { stopOsc(oscContainer) {
if (oscContainer.isPlaying) { if (oscContainer.isPlaying) {
let currentFreq = oscContainer.osc.frequency.value; let currentFreq = oscContainer.baseFreq;
console.log("the current frequency: " + currentFreq);
let currentType = oscContainer.osc.type; let currentType = oscContainer.osc.type;
console.log("the current type: " + currentType); let currentOctave = oscContainer.currentOctave;
oscContainer.osc.stop(); 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.isPlaying = false;
oscContainer.osc = this.audioContext.createOscillator(); oscContainer.baseFreq = currentFreq;
oscContainer.osc.type = currentType; oscContainer.currentOctave = currentOctave;
oscContainer.osc.frequency.setValueAtTime(
currentFreq,
this.audioContext.currentTime
);
oscContainer.osc.connect(this.gain);
console.log(oscContainer);
} }
} }
@@ -110,15 +181,18 @@ class Synth {
} }
} }
createFilter(type, freq, Q) { updateFilter(osc, freq, Q) {
const filter = this.audioContext.createBiquadFilter(); osc.filterNode.frequency.setValueAtTime(
filter.type = type; freq,
filter.frequency.setValueAtTime(freq, this.audioContext.currentTime); this.audioContext.currentTime
filter.Q.setValueAtTime(Q, this.audioContext.currentTime); );
return filter; osc.filterNode.Q.setValueAtTime(Q, this.audioContext.currentTime);
} }
} }
let audioConext = new AudioContext();
let synth = new Synth(audioConext);
function updateFrequency( function updateFrequency(
event, event,
synth, synth,
@@ -170,6 +244,8 @@ function updateFrequency(
); );
} }
function updateVolume(event, synth, oscIndex, masterVolume, voiceVolume) {}
function setupOctaveControls(voiceIndex, synth) { function setupOctaveControls(voiceIndex, synth) {
// Get the display element for the current voice // Get the display element for the current voice
let octaveDisplay = document.getElementById( let octaveDisplay = document.getElementById(
@@ -197,86 +273,38 @@ function setupOctaveControls(voiceIndex, synth) {
}); });
} }
// onload ------------------------------------------------------------------
window.onload = function () { window.onload = function () {
let synth = new Synth();
// start button // start button
document const voiceIds = ["activateVoice1", "activateVoice2", "activateVoice3"];
.getElementById("activateVoice1") voiceIds.forEach((id, index) => {
.addEventListener("click", (event) => { document.getElementById(`${id}`).addEventListener("click", (event) => {
console.log("voice 1 start clicked"); console.log(`voice: ${id} start clicked`);
synth.audioContext.resume(); // synth.audioContext.resume();
let osc1 = synth.oscillators[0]; let osc = synth.oscillators[index];
if (osc1.isPlaying) { if (osc.isPlaying) {
synth.stopOsc(osc1); synth.stopOsc(osc);
event.target.textContent = "On"; event.target.textContent = "On";
event.target.style.backgroundColor = "#2f855a"; event.target.style.backgroundColor = "#2f855a";
} else { } else {
synth.startOsc(osc1); synth.startOsc(osc);
event.target.textContent = "Off";
event.target.style.backgroundColor = "red";
}
});
document
.getElementById("activateVoice2")
.addEventListener("click", (event) => {
console.log("voice 2 start clicked");
synth.audioContext.resume();
let osc2 = synth.oscillators[1];
if (osc2.isPlaying) {
synth.stopOsc(osc2);
event.target.textContent = "On";
event.target.style.backgroundColor = "#2f855a";
} else {
synth.startOsc(osc2);
event.target.textContent = "Off";
event.target.style.backgroundColor = "red";
}
});
document
.getElementById("activateVoice3")
.addEventListener("click", (event) => {
console.log("voice 3 start clicked");
synth.audioContext.resume();
let osc3 = synth.oscillators[2];
if (osc3.isPlaying) {
synth.stopOsc(osc3);
event.target.textContent = "On";
event.target.style.backgroundColor = "#2f855a";
} else {
synth.startOsc(osc3);
event.target.textContent = "Off"; event.target.textContent = "Off";
event.target.style.backgroundColor = "red"; event.target.style.backgroundColor = "red";
} }
}); });
});
// handle waveform selection // handle waveform selection
document.querySelectorAll("input[name='wavechoice1']").forEach((rb) => { const waveChoices = ["wavechoice1", "wavechoice2", "wavechoice3"];
rb.addEventListener("change", (event) => { waveChoices.forEach((id, index) => {
let selectedWaveform = document.querySelector( document.querySelectorAll(`input[name='${id}']`).forEach((rb) => {
"input[name='wavechoice1']:checked" rb.addEventListener("change", (event) => {
).value; let selectedWaveform = document.querySelector(
synth.oscillators[0].osc.type = selectedWaveform; `input[name='${id}']:checked`
}); ).value;
}); synth.oscillators[index].osc.type = selectedWaveform;
});
document.querySelectorAll("input[name='wavechoice2']").forEach((rb) => {
rb.addEventListener("change", (event) => {
let selectedWaveform = document.querySelector(
"input[name='wavechoice2']:checked"
).value;
synth.oscillators[1].osc.type = selectedWaveform;
});
});
document.querySelectorAll("input[name='wavechoice3']").forEach((rb) => {
rb.addEventListener("change", (event) => {
let selectedWaveform = document.querySelector(
"input[name='wavechoice3']:checked"
).value;
synth.oscillators[2].osc.type = selectedWaveform;
}); });
}); });
@@ -285,24 +313,50 @@ window.onload = function () {
setupOctaveControls(i, synth); // Call setupOctaveControls for each voice setupOctaveControls(i, synth); // Call setupOctaveControls for each voice
} }
// detune // detune
const detuneSliderVoice1 = document.getElementById("detunevoice1"); ["1", "2", "3"].forEach((voiceNumber, index) => {
const detunevoice1Display = document.getElementById("detunevoice1display"); const detuneSlider = document.getElementById(`detunevoice${voiceNumber}`);
detuneSliderVoice1.addEventListener("input", (event) => { const detuneDisplay = document.getElementById(
let osc = synth.oscillators[0]; `detunevoice${voiceNumber}display`
let detune = parseFloat(detuneSliderVoice1.value); );
console.log(detune); detuneSlider.addEventListener("input", (event) => {
updateFrequency(event, synth, osc, 0, null, null, detune); let osc = synth.oscillators[index];
let detune = parseFloat(detuneSlider.value);
console.log(detune);
detuneDisplay.textContent = detune;
updateFrequency(event, synth, osc, index, null, null, detune);
});
}); });
// const filterSliderVoice1 = document.getElementById("filtervoice1"); // master volume
// const filtervoice1Display = document.getElementById("filtervoice1display"); const masterVolumeSlider = document.getElementById("mastervol");
// filterSliderVoice1.addEventListener("input", (event) => { const masterVolumeDisplay = document.getElementById("mastervoldisplay");
// const osc = synth.oscillators[0]; masterVolumeSlider.addEventListener("input", (event) => {
// let selectedFreq = parseFloat(filterSliderVoice1.value); masterVolume = parseFloat(masterVolumeSlider.value);
// const lpf = synth.createFilter("lowpass", 500, 1); masterVolumeDisplay.textContent = masterVolume;
// osc.osc.connect(lpf); synth.gain.gain.setValueAtTime(
// lpf.connect(synth.gain); 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 // handle chord changes
document.querySelectorAll("input[name='chordchoice']").forEach((rb) => { document.querySelectorAll("input[name='chordchoice']").forEach((rb) => {
@@ -328,4 +382,89 @@ window.onload = function () {
} }
}); });
}); });
// 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);
});
}; };