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 ## Basic Features
- [x] Waveform - [x] Waveform
- [ ] Pitch - [ ] Octave Selector
- [ ] Noise - [ ] Noise
- [ ] Keyboard

44
basic.html
View File

@ -9,16 +9,42 @@
</head> </head>
<body> <body>
<form style="padding: 15px"> <form style="padding: 15px">
<input type="radio" id="sinwave" name="wavechoice" value="sine"> <fieldset>
<label for="sinwave">Sine</label> <legend>Waveform Selection</legend>
<input type="radio" id="squarewave" name="wavechoice" value="square" checked> <input type="radio" id="sinwave" name="wavechoice" value="sine">
<label for="squarewave">Square</label> <label for="sinwave">Sine</label>
<input type="radio" id="triwave" name="wavechoice" value="triangle"> <input type="radio" id="squarewave" name="wavechoice" value="square" checked>
<label for="triwave">Triangle</label> <label for="squarewave">Square</label>
<input type="radio" id="sawtoothwave" name="wavechoice" value="sawtooth"> <input type="radio" id="triwave" name="wavechoice" value="triangle">
<label for="sawtoothwave">Sawtooth</label> <label for="triwave">Triangle</label>
<input type="radio" id="sawtoothwave" name="wavechoice" value="sawtooth">
<label for="sawtoothwave">Sawtooth</label>
</fieldset>
</form> </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"> <div style="padding: 15px">
<button id="start">Start</button> <button id="start">Start</button>
<button id="stop">Stop</button> <button id="stop">Stop</button>

12
basic.js
View File

@ -2,6 +2,11 @@ let osc = null;
let gain = null; let gain = null;
let selectedWave; let selectedWave;
function octavehz(hz, octave) {
const val = parseFloat(octave);
return hz * 2 ** val;
}
window.onload = function () { window.onload = function () {
const audioContext = new AudioContext(); 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 // 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; gainDisplay.textContent = level;
}); });
function handleSelectionChange() { function handleWaveformSelectionChange() {
let selectedRadioButton = document.querySelector( let selectedRadioButton = document.querySelector(
"input[name='wavechoice']:checked" "input[name='wavechoice']:checked"
); );
if (selectedRadioButton) { if (selectedRadioButton) {
selectedWave = selectedRadioButton.value; selectedWave = selectedRadioButton.value;
if (osc) {
osc.type = selectedWave;
}
console.log(selectedWave); console.log(selectedWave);
} else { } else {
console.log("No radio button is selected."); console.log("No radio button is selected.");
@ -38,7 +46,7 @@ window.onload = function () {
document document
.querySelectorAll("input[name='wavechoice']") .querySelectorAll("input[name='wavechoice']")
.forEach((radioButton) => { .forEach((radioButton) => {
radioButton.addEventListener("change", handleSelectionChange); radioButton.addEventListener("change", handleWaveformSelectionChange);
}); });
document.getElementById("start").addEventListener("click", () => { document.getElementById("start").addEventListener("click", () => {