diff --git a/index.html b/index-1.html similarity index 100% rename from index.html rename to index-1.html diff --git a/single-voice-synth.js b/single-voice-synth.js new file mode 100644 index 0000000..3cfc1a4 --- /dev/null +++ b/single-voice-synth.js @@ -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); +} diff --git a/single-voice.html b/single-voice.html new file mode 100644 index 0000000..1eccd9e --- /dev/null +++ b/single-voice.html @@ -0,0 +1,15 @@ + + + + + + + + simple-synth + + + + + +
+ diff --git a/synth.js b/synth.js index 8d8ad26..c58081a 100644 --- a/synth.js +++ b/synth.js @@ -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);