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

wip - start working on octave selection choice

This commit is contained in:
Emanuel Rodriguez 2023-10-01 01:57:09 -07:00
parent f09161d328
commit 5acec7e461
3 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -9,5 +9,6 @@ that Fabilter's Synth One has:
## Basic Features
- [x] Waveform
- [ ] Pitch
- [ ] Noise
- [ ] Octave Selector
- [ ] Noise
- [ ] Keyboard

44
basic.html
View File

@ -9,16 +9,42 @@
</head>
<body>
<form style="padding: 15px">
<input type="radio" id="sinwave" name="wavechoice" value="sine">
<label for="sinwave">Sine</label>
<input type="radio" id="squarewave" name="wavechoice" value="square" checked>
<label for="squarewave">Square</label>
<input type="radio" id="triwave" name="wavechoice" value="triangle">
<label for="triwave">Triangle</label>
<input type="radio" id="sawtoothwave" name="wavechoice" value="sawtooth">
<label for="sawtoothwave">Sawtooth</label>
<fieldset>
<legend>Waveform Selection</legend>
<input type="radio" id="sinwave" name="wavechoice" value="sine">
<label for="sinwave">Sine</label>
<input type="radio" id="squarewave" name="wavechoice" value="square" checked>
<label for="squarewave">Square</label>
<input type="radio" id="triwave" name="wavechoice" value="triangle">
<label for="triwave">Triangle</label>
<input type="radio" id="sawtoothwave" name="wavechoice" value="sawtooth">
<label for="sawtoothwave">Sawtooth</label>
</fieldset>
</form>
<form style="padding: 15px">
<fieldset>
<legend>Octave Selection</legend>
<input type="radio" id="minus2" name="octavechoice" value="-2">
<label for="minus2">-2</label>
<input type="radio" id="minus1" name="octavechoice" value="-1">
<label for="minus1">-1</label>
<input type="radio" id="plus0" name="octavechoice" value="0" checked>
<label for="plus0">0</label>
<input type="radio" id="plus1" name="octavechoice" value="1">
<label for="plus1">+1</label>
<input type="radio" id="plus2" name="octavechoice" value="2">
<label for="plus2">+2</label>
</fieldset>
</form>
<div style="padding: 15px">
<button id="start">Start</button>
<button id="stop">Stop</button>

12
basic.js
View File

@ -2,6 +2,11 @@ let osc = null;
let gain = null;
let selectedWave;
function octavehz(hz, octave) {
const val = parseFloat(octave);
return hz * 2 ** val;
}
window.onload = function () {
const audioContext = new AudioContext();
// this gets the node for the start butten and adds to it an even listener for click, when clicked the synth will play
@ -23,12 +28,15 @@ window.onload = function () {
gainDisplay.textContent = level;
});
function handleSelectionChange() {
function handleWaveformSelectionChange() {
let selectedRadioButton = document.querySelector(
"input[name='wavechoice']:checked"
);
if (selectedRadioButton) {
selectedWave = selectedRadioButton.value;
if (osc) {
osc.type = selectedWave;
}
console.log(selectedWave);
} else {
console.log("No radio button is selected.");
@ -38,7 +46,7 @@ window.onload = function () {
document
.querySelectorAll("input[name='wavechoice']")
.forEach((radioButton) => {
radioButton.addEventListener("change", handleSelectionChange);
radioButton.addEventListener("change", handleWaveformSelectionChange);
});
document.getElementById("start").addEventListener("click", () => {