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

Compare commits

base: ergz:37eabc79ca03b4e4c709ba897a56a94953e5360b
Branches Tags
ergz:main
..
compare: ergz:main
Branches Tags
ergz:main

5 Commits
37eabc79ca ... main

Author SHA1 Message Date
ergz
3273b1e6db make radio buttons happen 2024-02-15 23:57:07 -08:00
ergz
3d85edfc98 more work 2024-02-15 19:58:58 -08:00
ergz
1ac8df3a3f adds a detune slider 2024-02-08 23:18:43 -08:00
ergz
dc1bc9df2d fixes not connected to destination issue 2024-02-08 00:00:13 -08:00
ergz
3cb0784e39 work on synth class 2024-02-07 23:41:04 -08:00
2 changed files with 88 additions and 3 deletions
Expand all files Collapse all files

74
single-voice-synth.js
View File

@@ -1,24 +1,96 @@
class Synth { class Synth {
constructor(audioContext, waveType = "sine", frequency = 400) { constructor(audioContext, waveType = "triangle", frequency = 100) {
this.audioContext = audioContext; this.audioContext = audioContext;
this.oscWaveType = waveType; this.oscWaveType = waveType;
this.oscFrequency = frequency; this.oscFrequency = frequency;
this.isPlaying = false;
// osc setup
this.osc = this.audioContext.createOscillator(); this.osc = this.audioContext.createOscillator();
this.osc.type = this.oscWaveType; this.osc.type = this.oscWaveType;
this.osc.frequency.setValueAtTime(this.oscFrequency, this.audioContext.currentTime); this.osc.frequency.setValueAtTime(this.oscFrequency, this.audioContext.currentTime);
this.osc.connect(this.audioContext.destination);
} }
setOscWaveType(type) { setOscWaveType(type) {
this.oscWaveType = type; this.oscWaveType = type;
this.osc.type = this.oscWaveType; this.osc.type = this.oscWaveType;
} }
setOscFrequency(freq) {
this.oscFrequency = freq;
this.osc.frequency.setValueAtTime(freq, this.audioContext.currentTime);
}
setOscDetune(amount) {
this.osc.detune.setValueAtTime(amount, this.audioContext.currentTime);
}
startOsc() {
this.osc.start();
this.isPlaying = true;
}
stopOsc() {
// first get all the parameters for this osc
let currentFreq = this.osc.frequency.value;
let currentType = this.osc.type;
this.osc.stop();
this.osc = this.audioContext.createOscillator();
this.osc.type = currentType;
this.osc.frequency.setValueAtTime(currentFreq, this.audioContext.currentTime);
this.osc.connect(this.audioContext.destination);
this.isPlaying = false;
}
toggleOsc() {
if (this.isPlaying === false) {
this.startOsc();
} else {
this.stopOsc();
}
}
} }
let globalAudioContext = new AudioContext(); let globalAudioContext = new AudioContext();
let synth = new Synth(globalAudioContext); let synth = new Synth(globalAudioContext);
function toggleOscillator() {
synth.toggleOsc();
}
window.onload = function() { window.onload = function() {
console.log("hello world!"); console.log("hello world!");
console.log(synth); console.log(synth);
var waveTypeChoicesButtons = document.querySelectorAll("input[name='wave']");
// waveTypeChoicesButtons.forEach((radio) => {
// radio.addEventListener("change", (event) => {
// if (event.target.checked) {
// let selectedWaveType = event.target.value;
// synth.setOscWaveType(selectedWaveType);
// }
// })
// })
waveTypeChoicesButtons.forEach((rb) => {
rb.addEventListener("change", (event) => {
let selectedWave = document.querySelector("input[name='wave']:checked").value;
synth.setOscWaveType(selectedWave);
})
})
console.info(waveTypeChoicesButtons);
console.log("the selected wave:" + waveTypeChoicesButtons);
var detune = document.getElementById("detune");
detune.addEventListener("input", () => {
synth.setOscDetune(parseFloat(detune.value))
})
} }

13
single-voice.html
View File

@@ -10,6 +10,19 @@
<body class="bg-gray-900 p-10 mb-5"> <body class="bg-gray-900 p-10 mb-5">
<script src="single-voice-synth.js"></script> <script src="single-voice-synth.js"></script>
<div class="flex justify-between"></div> <div class="flex justify-between"></div>
<button onclick="toggleOscillator()">Start/Stop</button>
<input type="range" min="-40" max="40" value="0" class="slider" id="detune">
<form>
<input type="radio" id="sine" name="wave" value="sine" checked>
<label for="sine">Sine</label><br>
<input type="radio" id="triangle" name="wave" value="triangle">
<label for="triangle">Triangle</label><br>
<input type="radio" id="square" name="wave" value="square">
<label for="square">Square</label><br>
<input type="radio" id="sawtooth" name="wave" value="sawtooth">
<label for="sawtooth">Sawtooth</label>
</form>
</body> </body>