Compare commits
9 Commits
7d0a80a987
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 3273b1e6db | |||
| 3d85edfc98 | |||
| 1ac8df3a3f | |||
| dc1bc9df2d | |||
| 3cb0784e39 | |||
| 37eabc79ca | |||
| 80052bb864 | |||
| 1ecac8d4f6 | |||
| 2d84b91e56 |
@@ -7,27 +7,27 @@
|
||||
<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">
|
||||
<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-800 rounded-md p-4 m-4">
|
||||
<div class="flex-grow border-2 border-gray-600 rounded-md p-4 m-4">
|
||||
<form>
|
||||
<legend class="text-lg mb-2">Voice 1</legend>
|
||||
<legend class="text-lg text-gray-300 mb-2">Voice 1</legend>
|
||||
<input type="radio" id="wave1_sinwave" name="wavechoice1" value="sine" checked>
|
||||
<label for="wave1_sinwave">Sine</label>
|
||||
<label class = "text-gray-300" wave1_sinwave">Sine</label>
|
||||
<input type="radio" id="wave1_squarewave" name="wavechoice1" value="square">
|
||||
<label for="wave1_squarewave">Square</label>
|
||||
<label class = "text-gray-300" for="wave1_squarewave">Square</label>
|
||||
<input type="radio" id="wave1_triwave" name="wavechoice1" value="triangle">
|
||||
<label for="wave1_triwave">Triangle</label>
|
||||
<label class = "text-gray-300" for="wave1_triwave">Triangle</label>
|
||||
<input type="radio" id="wave1_sawtoothwave" name="wavechoice1" value="sawtooth">
|
||||
<label for="wave1_sawtoothwave">Sawtooth</label>
|
||||
<label class = "text-gray-300" for="wave1_sawtoothwave">Sawtooth</label>
|
||||
</form>
|
||||
|
||||
<div class="flex items-center space-x-2 my-3">
|
||||
<fieldset>
|
||||
<legend>Octave Selection</legend>
|
||||
<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>
|
||||
@@ -35,15 +35,15 @@
|
||||
</div>
|
||||
|
||||
<div style="padding: 5px">
|
||||
<label for="volumevoice1" class="block text-sm font-medium text-gray-700 mb-1">volume voice</label>
|
||||
<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-700 ml-2">0</span>
|
||||
<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-700 mb-1">detune voice</label>
|
||||
<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-700 ml-2">0</span>
|
||||
<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">
|
||||
@@ -56,37 +56,37 @@
|
||||
<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">
|
||||
<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">Voice 2</legend>
|
||||
<legend class="text-lg text-gray-300 mb-2">Voice 2</legend>
|
||||
<input type="radio" id="wave2_sinwave" name="wavechoice2" value="sine" checked>
|
||||
<label for="wave2_sinwave">Sine</label>
|
||||
<label class="text-gray-300" for="wave2_sinwave">Sine</label>
|
||||
<input type="radio" id="wave2_squarewave" name="wavechoice2" value="square">
|
||||
<label for="wave2_squarewave">Square</label>
|
||||
<label class="text-gray-300" for="wave2_squarewave">Square</label>
|
||||
<input type="radio" id="wave2_triwave" name="wavechoice2" value="triangle">
|
||||
<label for="wave2_triwave">Triangle</label>
|
||||
<label class="text-gray-300" for="wave2_triwave">Triangle</label>
|
||||
<input type="radio" id="wave2_sawtoothwave" name="wavechoice2" value="sawtooth">
|
||||
<label for="wave2_sawtoothwave">Sawtooth</label>
|
||||
<label class="text-gray-300" 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>
|
||||
<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-700 mb-1">volume voice</label>
|
||||
<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-700 mb-1">detune voice</label>
|
||||
<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>
|
||||
@@ -102,22 +102,22 @@
|
||||
<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">
|
||||
<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">Voice 3</legend>
|
||||
<legend class="text-lg mb-2 text-gray-300">Voice 3</legend>
|
||||
<input type="radio" id="wave3_sinwave" name="wavechoice3" value="sine" checked>
|
||||
<label for="wave3_sinwave">Sine</label>
|
||||
<label class="text-gray-300" for="wave3_sinwave">Sine</label>
|
||||
<input type="radio" id="wave3_squarewave" name="wavechoice3" value="square">
|
||||
<label for="wave3_squarewave">Square</label>
|
||||
<label class="text-gray-300" for="wave3_squarewave">Square</label>
|
||||
<input type="radio" id="wave3_triwave" name="wavechoice3" value="triangle">
|
||||
<label for="wave3_triwave">Triangle</label>
|
||||
<label class="text-gray-300" for="wave3_triwave">Triangle</label>
|
||||
<input type="radio" id="wave3_sawtoothwave" name="wavechoice3" value="sawtooth">
|
||||
<label for="wave3_sawtoothwave">Sawtooth</label>
|
||||
<label class="text-gray-300" for="wave3_sawtoothwave">Sawtooth</label>
|
||||
</form>
|
||||
<div class="flex items-center space-x-2 my-3">
|
||||
<fieldset>
|
||||
<legend>Octave Selection</legend>
|
||||
<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>
|
||||
@@ -125,16 +125,16 @@
|
||||
</div>
|
||||
|
||||
<div style="padding: 5px">
|
||||
<label for="volumevoice3" class="block text-sm font-medium text-gray-700 mb-1">volume voice</label>
|
||||
<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-700 ml-2">0</span>
|
||||
<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-700 mb-1">detune voice</label>
|
||||
<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-700 ml-2">0</span>
|
||||
<span id="detunevoice3display" class="text-sm text-gray-300 ml-2">0</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -151,15 +151,15 @@
|
||||
</div>
|
||||
|
||||
<div style="padding: 5px">
|
||||
<label for="mastervol" class="block text-sm font-medium text-gray-700 mb-1">Master Volume</label>
|
||||
<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-700 ml-2">0</span>
|
||||
<span id="mastervoldisplay" class="text-sm text-gray-300 ml-2">0</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
|
||||
|
||||
<label for="chordscales">Choose Scale:</label>
|
||||
<label class = "text-gray-300" for="chordscales">Choose Scale:</label>
|
||||
<select id="chordscales">
|
||||
<option value="Cscale">C</option>
|
||||
<option value="Dscale">D</option>
|
||||
@@ -172,63 +172,72 @@
|
||||
<div>
|
||||
<form style="padding: 15px">
|
||||
<fieldset>
|
||||
<legend>Chords</legend>
|
||||
<legend class="text-gray-300">Chords</legend>
|
||||
|
||||
<!-- Major Chords -->
|
||||
<div>
|
||||
|
||||
<input type="radio" id="chordC" name="chordchoice" value="C" checked>
|
||||
<label for="chordC">C</label>
|
||||
<label class="text-gray-300" for="chordC">C</label>
|
||||
|
||||
<input type="radio" id="chordD" name="chordchoice" value="D">
|
||||
<label for="chordD">D</label>
|
||||
<label class="text-gray-300" for="chordD">D</label>
|
||||
|
||||
<input type="radio" id="chordE" name="chordchoice" value="E">
|
||||
<label for="chordE">E</label>
|
||||
<label class="text-gray-300" for="chordE">E</label>
|
||||
|
||||
<input type="radio" id="chordF" name="chordchoice" value="F">
|
||||
<label for="chordF">F</label>
|
||||
<label class="text-gray-300" for="chordF">F</label>
|
||||
|
||||
<input type="radio" id="chordG" name="chordchoice" value="G">
|
||||
<label for="chordG">G</label>
|
||||
<label class="text-gray-300" for="chordG">G</label>
|
||||
|
||||
<input type="radio" id="chordA" name="chordchoice" value="A">
|
||||
<label for="chordA">A</label>
|
||||
<label class="text-gray-300" for="chordA">A</label>
|
||||
|
||||
<input type="radio" id="chordB" name="chordchoice" value="B">
|
||||
<label for="chordB">B</label>
|
||||
<label class="text-gray-300" for="chordB">B</label>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<!-- Minor Chords -->
|
||||
<input type="radio" id="chordCm" name="chordchoice" value="Cm">
|
||||
<label for="chordCm">Cm</label>
|
||||
<label class="text-gray-300" for="chordCm">Cm</label>
|
||||
|
||||
<input type="radio" id="chordDm" name="chordchoice" value="Dm">
|
||||
<label for="chordDm">Dm</label>
|
||||
<label class="text-gray-300" for="chordDm">Dm</label>
|
||||
|
||||
<input type="radio" id="chordEm" name="chordchoice" value="Em">
|
||||
<label for="chordEm">Em</label>
|
||||
<label class="text-gray-300" for="chordEm">Em</label>
|
||||
|
||||
<input type="radio" id="chordFm" name="chordchoice" value="Fm">
|
||||
<label for="chordFm">Fm</label>
|
||||
<label class="text-gray-300" for="chordFm">Fm</label>
|
||||
|
||||
<input type="radio" id="chordGm" name="chordchoice" value="Gm">
|
||||
<label for="chordGm">Gm</label>
|
||||
<label class="text-gray-300" for="chordGm">Gm</label>
|
||||
|
||||
<input type="radio" id="chordAm" name="chordchoice" value="Am">
|
||||
<label for="chordAm">Am</label>
|
||||
<label class="text-gray-300" for="chordAm">Am</label>
|
||||
|
||||
<input type="radio" id="chordBm" name="chordchoice" value="Bm">
|
||||
<label for="chordBm">Bm</label>
|
||||
<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>
|
||||
84
synth.js
84
synth.js
@@ -103,8 +103,8 @@ function composeChord(chord) {
|
||||
}
|
||||
|
||||
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),
|
||||
@@ -117,14 +117,25 @@ class Synth {
|
||||
createOscillator(type = "sine", freq = 440, startOctave) {
|
||||
const osc = this.audioContext.createOscillator();
|
||||
const gainNode = this.audioContext.createGain();
|
||||
gainNode.connect(this.audioContext.destination);
|
||||
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);
|
||||
osc.connect(this.gain);
|
||||
osc.connect(gainNode);
|
||||
|
||||
// wrap around the container and add to array
|
||||
const oscContainer = {
|
||||
@@ -133,6 +144,7 @@ class Synth {
|
||||
baseFreq: freq,
|
||||
currentOctave: startOctave,
|
||||
gainNode,
|
||||
filterNode,
|
||||
};
|
||||
return oscContainer;
|
||||
}
|
||||
@@ -144,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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -169,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,
|
||||
@@ -268,7 +281,7 @@ window.onload = function () {
|
||||
voiceIds.forEach((id, index) => {
|
||||
document.getElementById(`${id}`).addEventListener("click", (event) => {
|
||||
console.log(`voice: ${id} start clicked`);
|
||||
synth.audioContext.resume();
|
||||
// synth.audioContext.resume();
|
||||
let osc = synth.oscillators[index];
|
||||
if (osc.isPlaying) {
|
||||
synth.stopOsc(osc);
|
||||
@@ -380,7 +393,7 @@ window.onload = function () {
|
||||
const analyser = synth.audioContext.createAnalyser();
|
||||
analyser.fftSize = 2048;
|
||||
|
||||
synth.oscillators[index].osc.connect(analyser);
|
||||
synth.oscillators[index].filterNode.connect(analyser);
|
||||
const bufferLength = analyser.fftSize;
|
||||
const dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
@@ -433,4 +446,25 @@ window.onload = function () {
|
||||
}
|
||||
|
||||
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