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

wip 

trying to get the radio oscillator wave to be seletable by
the radiobuttons
This commit is contained in:
Emanuel Rodriguez 2023-10-01 00:10:28 -07:00
parent aa0f8686f6
commit 93f3ae3fda
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
basic.html
View File

@ -5,9 +5,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<title>simple-synth</title>
</head>
<body>
<form>
<input type="radio" id="sinwave" name="wavechoice" value="sine" checked>
<label for="sinwave">Sine</label>
<input type="radio" id="squarewave" name="wavechoice" value="square">
<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>
</form>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div style="padding: 10px;">

17
basic.js
View File

@ -2,6 +2,10 @@ let osc = null;
let gain = null;
window.onload = function () {
let selectedWave = document.querySelector(
"input[name='wavechoice']:checked"
).value;
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
@ -31,7 +35,7 @@ window.onload = function () {
gain = audioContext.createGain();
}
osc.type = "sine";
osc.type = "" + selectedWave;
osc.frequency.setValueAtTime(
parseFloat(freq.value),
audioContext.currentTime
@ -51,4 +55,15 @@ window.onload = function () {
osc.stop();
osc = null;
});
function handleSelectionChange() {
let selectedValue = document.querySelector(
'input[name="choice"]:checked'
).value;
console.log(selectedValue);
}
document.querySelectorAll("input[name='wavechoice']").forEach((rb) => {
rb.addEventListener("change", handleSelectionChange);
});
};