Compare commits
15 Commits
c7c545ab0d
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 3273b1e6db | |||
| 3d85edfc98 | |||
| 1ac8df3a3f | |||
| dc1bc9df2d | |||
| 3cb0784e39 | |||
| 37eabc79ca | |||
| 80052bb864 | |||
| 1ecac8d4f6 | |||
| 2d84b91e56 | |||
| 7d0a80a987 | |||
| 2b5a0453d0 | |||
| 7bed2c6085 | |||
| 77af7d2576 | |||
| 3773cfd778 | |||
| ae06952e73 |
243
index-1.html
Normal file
243
index-1.html
Normal 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
96
single-voice-synth.js
Normal 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
28
single-voice.html
Normal 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>
|
||||
147
synth.html
147
synth.html
@@ -1,147 +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>
|
||||
|
||||
<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>
|
||||
<!-- Rest of your HTML for this container... -->
|
||||
</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>
|
||||
424
synth.js
424
synth.js
@@ -1,21 +1,37 @@
|
||||
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;
|
||||
return 392.0;
|
||||
case "G#":
|
||||
case "Ab":
|
||||
return 415.3;
|
||||
case "A":
|
||||
return 440;
|
||||
return 440.0;
|
||||
case "A#":
|
||||
case "Bb":
|
||||
return 466.16;
|
||||
case "B":
|
||||
return 493.88;
|
||||
default:
|
||||
@@ -25,36 +41,70 @@ function noteToHz(note) {
|
||||
|
||||
function composeChord(chord) {
|
||||
switch (chord) {
|
||||
case "C": {
|
||||
return ["C", "G", "E"];
|
||||
}
|
||||
case "D": {
|
||||
return ["D", "F", "A"];
|
||||
}
|
||||
case "E": {
|
||||
return ["E", "G", "B"];
|
||||
}
|
||||
case "F": {
|
||||
return ["F", "A", "C"];
|
||||
}
|
||||
case "G": {
|
||||
return ["G", "B", "D"];
|
||||
}
|
||||
case "A": {
|
||||
return ["A", "C", "E"];
|
||||
}
|
||||
case "B": {
|
||||
return ["B", "D", "F"];
|
||||
}
|
||||
default: {
|
||||
return ["C", "D", "E"];
|
||||
}
|
||||
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() {
|
||||
this.audioContext = new AudioContext();
|
||||
constructor(audioContext) {
|
||||
this.audioContext = audioContext;
|
||||
this.gain = this.audioContext.createGain();
|
||||
this.oscillators = [
|
||||
this.createOscillator("sine", 261.63, 0),
|
||||
@@ -66,11 +116,26 @@ class Synth {
|
||||
|
||||
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);
|
||||
osc.connect(this.gain);
|
||||
gainNode.gain.setTargetAtTime(0.05, this.audioContext.currentTime, 0);
|
||||
|
||||
// wrap around the container and add to array
|
||||
const oscContainer = {
|
||||
@@ -78,6 +143,8 @@ class Synth {
|
||||
isPlaying: false,
|
||||
baseFreq: freq,
|
||||
currentOctave: startOctave,
|
||||
gainNode,
|
||||
filterNode,
|
||||
};
|
||||
return oscContainer;
|
||||
}
|
||||
@@ -89,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) {
|
||||
if (oscContainer.isPlaying) {
|
||||
let currentFreq = oscContainer.osc.frequency.value;
|
||||
console.log("the current frequency: " + currentFreq);
|
||||
let currentFreq = oscContainer.baseFreq;
|
||||
let currentType = oscContainer.osc.type;
|
||||
console.log("the current type: " + currentType);
|
||||
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.osc = this.audioContext.createOscillator();
|
||||
oscContainer.osc.type = currentType;
|
||||
oscContainer.osc.frequency.setValueAtTime(
|
||||
currentFreq,
|
||||
this.audioContext.currentTime
|
||||
);
|
||||
oscContainer.osc.connect(this.gain);
|
||||
console.log(oscContainer);
|
||||
oscContainer.baseFreq = currentFreq;
|
||||
oscContainer.currentOctave = currentOctave;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -114,16 +181,17 @@ class Synth {
|
||||
}
|
||||
}
|
||||
|
||||
createFilter(type, freq, Q) {
|
||||
const filter = this.audioContext.createBiquadFilter();
|
||||
filter.type = type;
|
||||
filter.frequency.setValueAtTime(freq, this.audioContext.currentTime);
|
||||
filter.Q.setValueAtTime(Q, this.audioContext.currentTime);
|
||||
return filter;
|
||||
updateFilter(osc, freq, Q) {
|
||||
osc.filterNode.frequency.setValueAtTime(
|
||||
freq,
|
||||
this.audioContext.currentTime
|
||||
);
|
||||
osc.filterNode.Q.setValueAtTime(Q, this.audioContext.currentTime);
|
||||
}
|
||||
}
|
||||
|
||||
let synth = new Synth();
|
||||
let audioConext = new AudioContext();
|
||||
let synth = new Synth(audioConext);
|
||||
|
||||
function updateFrequency(
|
||||
event,
|
||||
@@ -176,6 +244,8 @@ function updateFrequency(
|
||||
);
|
||||
}
|
||||
|
||||
function updateVolume(event, synth, oscIndex, masterVolume, voiceVolume) {}
|
||||
|
||||
function setupOctaveControls(voiceIndex, synth) {
|
||||
// Get the display element for the current voice
|
||||
let octaveDisplay = document.getElementById(
|
||||
@@ -207,82 +277,34 @@ function setupOctaveControls(voiceIndex, synth) {
|
||||
window.onload = function () {
|
||||
// start button
|
||||
|
||||
document
|
||||
.getElementById("activateVoice1")
|
||||
.addEventListener("click", (event) => {
|
||||
console.log("voice 1 start clicked");
|
||||
synth.audioContext.resume();
|
||||
let osc1 = synth.oscillators[0];
|
||||
if (osc1.isPlaying) {
|
||||
synth.stopOsc(osc1);
|
||||
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(osc1);
|
||||
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);
|
||||
synth.startOsc(osc);
|
||||
event.target.textContent = "Off";
|
||||
event.target.style.backgroundColor = "red";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// handle waveform selection
|
||||
document.querySelectorAll("input[name='wavechoice1']").forEach((rb) => {
|
||||
rb.addEventListener("change", (event) => {
|
||||
let selectedWaveform = document.querySelector(
|
||||
"input[name='wavechoice1']:checked"
|
||||
).value;
|
||||
synth.oscillators[0].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;
|
||||
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;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -291,24 +313,50 @@ window.onload = function () {
|
||||
setupOctaveControls(i, synth); // Call setupOctaveControls for each voice
|
||||
}
|
||||
// detune
|
||||
const detuneSliderVoice1 = document.getElementById("detunevoice1");
|
||||
const detunevoice1Display = document.getElementById("detunevoice1display");
|
||||
detuneSliderVoice1.addEventListener("input", (event) => {
|
||||
let osc = synth.oscillators[0];
|
||||
let detune = parseFloat(detuneSliderVoice1.value);
|
||||
console.log(detune);
|
||||
updateFrequency(event, synth, osc, 0, null, null, 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);
|
||||
});
|
||||
});
|
||||
|
||||
// const filterSliderVoice1 = document.getElementById("filtervoice1");
|
||||
// const filtervoice1Display = document.getElementById("filtervoice1display");
|
||||
// filterSliderVoice1.addEventListener("input", (event) => {
|
||||
// const osc = synth.oscillators[0];
|
||||
// let selectedFreq = parseFloat(filterSliderVoice1.value);
|
||||
// const lpf = synth.createFilter("lowpass", 500, 1);
|
||||
// osc.osc.connect(lpf);
|
||||
// lpf.connect(synth.gain);
|
||||
// });
|
||||
// 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) => {
|
||||
@@ -336,59 +384,87 @@ window.onload = function () {
|
||||
});
|
||||
|
||||
// do the viz
|
||||
const vizCanvas = document.getElementById("wave1canvas");
|
||||
const ctx = vizCanvas.getContext("2d");
|
||||
const analyser = synth.audioContext.createAnalyser();
|
||||
analyser.fftSize = 2048;
|
||||
let osc = synth.oscillators[0].osc;
|
||||
osc.connect(analyser);
|
||||
const bufferLength = analyser.fftSize;
|
||||
const dataArray = new Uint8Array(bufferLength);
|
||||
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() {
|
||||
// Get the waveform data
|
||||
analyser.getByteTimeDomainData(dataArray);
|
||||
|
||||
// Clear the canvas
|
||||
ctx.clearRect(0, 0, vizCanvas.width, vizCanvas.height);
|
||||
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, vizCanvas.width, vizCanvas.height);
|
||||
// Set up the drawing parameters
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = "rgb(0, 200, 100)";
|
||||
|
||||
// Set up the glowing effect
|
||||
ctx.shadowBlur = 12; // Adjust the level of glow by changing this value
|
||||
ctx.shadowColor = "rgb(0, 200, 100)"; // Make sure the shadow color matches the stroke color
|
||||
// Optionally, you can offset the shadow if desired
|
||||
ctx.shadowOffsetX = 2;
|
||||
ctx.shadowOffsetY = 5;
|
||||
|
||||
// Begin the path
|
||||
ctx.beginPath();
|
||||
|
||||
const sliceWidth = (vizCanvas.width * 1.0) / bufferLength;
|
||||
let x = 0;
|
||||
|
||||
for (let i = 0; i < bufferLength; i++) {
|
||||
const v = dataArray[i] / 128.0;
|
||||
const y = (v * vizCanvas.height) / 2;
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, y);
|
||||
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 {
|
||||
ctx.lineTo(x, y);
|
||||
viz.ctx.fillStyle = "black";
|
||||
}
|
||||
|
||||
x += sliceWidth;
|
||||
}
|
||||
viz.ctx.fillRect(0, 0, viz.canvas.width, viz.canvas.height);
|
||||
viz.ctx.lineWidth = 2;
|
||||
viz.ctx.strokeStyle = "rgb(0, 200, 100)";
|
||||
|
||||
ctx.lineTo(vizCanvas.width, vizCanvas.height / 2);
|
||||
ctx.stroke();
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user