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

bare bones filter

This commit is contained in:
Emanuel Rodriguez 2023-10-14 02:55:32 -07:00
parent 7d0a80a987
commit 2d84b91e56
2 changed files with 53 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -227,8 +227,17 @@
</fieldset>
</form>
</div>
<div style="padding: 5px">
<label for="filter" class="block text-sm font-medium text-gray-700 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-700 ml-2">0</span>
</div>
<div style="padding: 5px">
<label for="Q" class="block text-sm font-medium text-gray-700 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-700 ml-2">0</span>
</div>
</body>
</html>

51
synth.js
View File

@ -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;
}
@ -169,12 +181,12 @@ 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);
}
}
@ -433,4 +445,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);
});
};