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

wip: waveform now chosen by radiobuttons

This commit is contained in:
Emanuel Rodriguez 2023-10-01 01:17:40 -07:00
parent 93f3ae3fda
commit 7ffefea7a2
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
basic.html
View File

@ -8,10 +8,10 @@
<title>simple-synth</title> <title>simple-synth</title>
</head> </head>
<body> <body>
<form> <form style="padding: 15px">
<input type="radio" id="sinwave" name="wavechoice" value="sine" checked> <input type="radio" id="sinwave" name="wavechoice" value="sine">
<label for="sinwave">Sine</label> <label for="sinwave">Sine</label>
<input type="radio" id="squarewave" name="wavechoice" value="square"> <input type="radio" id="squarewave" name="wavechoice" value="square" checked>
<label for="squarewave">Square</label> <label for="squarewave">Square</label>
<input type="radio" id="triwave" name="wavechoice" value="triangle"> <input type="radio" id="triwave" name="wavechoice" value="triangle">
<label for="triwave">Triangle</label> <label for="triwave">Triangle</label>
@ -19,9 +19,11 @@
<label for="sawtoothwave">Sawtooth</label> <label for="sawtoothwave">Sawtooth</label>
</form> </form>
<button id="start">Start</button> <div style="padding: 15px">
<button id="stop">Stop</button> <button id="start">Start</button>
<div style="padding: 10px;"> <button id="stop">Stop</button>
</div>
<div style="padding: 10px;">
<label for="freq">Frequency</label> <label for="freq">Frequency</label>
<input id="freq" type="range" min="100" max="700" value="440" step="10"> <input id="freq" type="range" min="100" max="700" value="440" step="10">
<span id="freqDisplay">440</span>Hz <span id="freqDisplay">440</span>Hz

36
basic.js
View File

@ -1,11 +1,8 @@
let osc = null; let osc = null;
let gain = null; let gain = null;
let selectedWave;
window.onload = function () { window.onload = function () {
let selectedWave = document.querySelector(
"input[name='wavechoice']:checked"
).value;
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
@ -26,6 +23,24 @@ window.onload = function () {
gainDisplay.textContent = level; gainDisplay.textContent = level;
}); });
function handleSelectionChange() {
let selectedRadioButton = document.querySelector(
"input[name='wavechoice']:checked"
);
if (selectedRadioButton) {
selectedWave = selectedRadioButton.value;
console.log(selectedWave);
} else {
console.log("No radio button is selected.");
}
}
document
.querySelectorAll("input[name='wavechoice']")
.forEach((radioButton) => {
radioButton.addEventListener("change", handleSelectionChange);
});
document.getElementById("start").addEventListener("click", () => { document.getElementById("start").addEventListener("click", () => {
if (!osc) { if (!osc) {
osc = audioContext.createOscillator(); osc = audioContext.createOscillator();
@ -35,7 +50,7 @@ window.onload = function () {
gain = audioContext.createGain(); gain = audioContext.createGain();
} }
osc.type = "" + selectedWave; osc.type = selectedWave;
osc.frequency.setValueAtTime( osc.frequency.setValueAtTime(
parseFloat(freq.value), parseFloat(freq.value),
audioContext.currentTime audioContext.currentTime
@ -55,15 +70,4 @@ window.onload = function () {
osc.stop(); osc.stop();
osc = null; 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);
});
}; };