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

work on a simpler version of synth that works and then try to expand that

This commit is contained in:
Emanuel Rodriguez 2024-02-07 23:02:03 -08:00
parent 80052bb864
commit 37eabc79ca
4 changed files with 55 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
index.html → index-1.html
View File

24
single-voice-synth.js Normal file
View File

@ -0,0 +1,24 @@
class Synth {
constructor(audioContext, waveType = "sine", frequency = 400) {
this.audioContext = audioContext;
this.oscWaveType = waveType;
this.oscFrequency = frequency;
this.osc = this.audioContext.createOscillator();
this.osc.type = this.oscWaveType;
this.osc.frequency.setValueAtTime(this.oscFrequency, this.audioContext.currentTime);
}
setOscWaveType(type) {
this.oscWaveType = type;
this.osc.type = this.oscWaveType;
}
}
let globalAudioContext = new AudioContext();
let synth = new Synth(globalAudioContext);
window.onload = function() {
console.log("hello world!");
console.log(synth);
}

15
single-voice.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> -->
<title>simple-synth</title>
</head>
<body class="bg-gray-900 p-10 mb-5">
<script src="single-voice-synth.js"></script>
<div class="flex justify-between"></div>
</body>

31
synth.js
View File

@ -103,8 +103,8 @@ function composeChord(chord) {
}
class Synth {
constructor() {
this.audioContext = new AudioContext();
constructor(audioContext) {
this.audioContext = audioContext;
this.gain = this.audioContext.createGain();
this.oscillators = [
this.createOscillator("sine", 261.63, 0),
@ -156,22 +156,22 @@ class Synth {
}
}
// the web-audio api destroys an osc when it is stopped, therefore we must create a new one
// in its place and set it up as we first do when creating one
stopOsc(oscContainer) {
if (oscContainer.isPlaying) {
let currentFreq = oscContainer.osc.frequency.value;
console.log("the current frequency: " + currentFreq);
let currentFreq = oscContainer.baseFreq;
let currentType = oscContainer.osc.type;
console.log("the current type: " + currentType);
let currentOctave = oscContainer.currentOctave;
oscContainer.osc.stop();
let newOsc = this.createOscillator(currentType, currentFreq, currentOctave);
oscContainer.osc = newOsc.osc;
oscContainer.gainNode = newOsc.gainNode;
oscContainer.filterNode = newOsc.filterNode;
oscContainer.isPlaying = false;
oscContainer.osc = this.audioContext.createOscillator();
oscContainer.osc.type = currentType;
oscContainer.osc.frequency.setValueAtTime(
currentFreq,
this.audioContext.currentTime
);
oscContainer.osc.connect(this.gain);
console.log(oscContainer);
oscContainer.baseFreq = currentFreq;
oscContainer.currentOctave = currentOctave;
}
}
@ -190,7 +190,8 @@ class Synth {
}
}
let synth = new Synth();
let audioConext = new AudioContext();
let synth = new Synth(audioConext);
function updateFrequency(
event,
@ -280,7 +281,7 @@ window.onload = function () {
voiceIds.forEach((id, index) => {
document.getElementById(`${id}`).addEventListener("click", (event) => {
console.log(`voice: ${id} start clicked`);
synth.audioContext.resume();
// synth.audioContext.resume();
let osc = synth.oscillators[index];
if (osc.isPlaying) {
synth.stopOsc(osc);