fix play/pause finally maybe?

1 files changed, 24 insertions, 30 deletions

diff --git a/player.mjs b/player.mjs
index 02feb6c..070eadf 100644
--- a/player.mjs
+++ b/player.mjs
@@ -1,17 +1,5 @@
-import { Note, toCents } from './scale.mjs';
-import GuitarFuzz from './vend/guitar-fuzz.mjs';
 import Trombone from './vend/trombone.mjs';
 
-const audioCtx = new AudioContext();
-const fuzzWave = new PeriodicWave(audioCtx, {
-    real: GuitarFuzz.real,
-    imag: GuitarFuzz.imag
-});
-const tromboneWave = new PeriodicWave(audioCtx, {
-    real: Trombone.real,
-    imag: Trombone.imag
-});
-
 export default class extends HTMLElement {
     static name = 'x-player'
     static register() {
@@ -32,13 +20,19 @@ export default class extends HTMLElement {
     }
 
     connectedCallback() {
-        this.globalGain = audioCtx.createGain();
-        this.globalGain.connect(audioCtx.destination);
-        this.globalGain.gain.setValueAtTime(this.volume, audioCtx.currentTime);
+        this.audioCtx = new AudioContext();
+        this.wave = new PeriodicWave(this.audioCtx, {
+            real: Trombone.real,
+            imag: Trombone.imag
+        });
+
+        this.globalGain = this.audioCtx.createGain();
+        this.globalGain.connect(this.audioCtx.destination);
+        this.globalGain.gain.setValueAtTime(this.volume, this.audioCtx.currentTime);
 
         this.querySelector('.volume').onchange = e => {
             console.debug('vol changed', e, this.volume);
-            this.globalGain.gain.setValueAtTime(this.volume, audioCtx.currentTime);
+            this.globalGain.gain.setValueAtTime(this.volume, this.audioCtx.currentTime);
         }
     }
 
@@ -53,12 +47,12 @@ export default class extends HTMLElement {
     }
 
     get isPlaying() {
+        console.debug('Player#isPlaying', this, this.classList.contains('playing'));
         return this.classList.contains('playing');
     }
 
     // offsets is an array of offsets in cents from A4.
     get offsets() {
-        console.debug('offsets getoffsets', this.getOffsets);
         return this.getOffsets();
     }
 
@@ -74,38 +68,38 @@ export default class extends HTMLElement {
     }
 
     update() {
+        console.debug('Player#update', this.offsets, this.notes);
         for (let i = 0; i < this.offsets.length; i++) {
             if (!this.notes[i]) {
-                const note = new OscillatorNode(audioCtx, {
+                console.debug('new note for', i)
+                const note = new OscillatorNode(this.audioCtx, {
                     frequency: this.aFreq,
                     type: 'custom',
-                    periodicWave: tromboneWave,
+                    periodicWave: this.wave
                 });
                 note.connect(this.globalGain);
-                if (this.isPlaying) {
-                    note.start();
-                }
+                note.start();
                 this.notes[i] = note;
             }
             const note = this.notes[i];
-            note.detune.setValueAtTime(this.offsets[i], audioCtx.currentTime);
+            note.detune.setValueAtTime(this.offsets[i], this.audioCtx.currentTime);
         }
         for (let j = this.notes.length-1; j >= this.offsets.length; j--) {
             const note = this.notes[j];
-            if (note && this.isPlaying) {
-                note.stop();
-            }
-            delete this.notes[j];
+            note.stop();
         }
+        this.notes = this.notes.slice(0, this.offsets.length);
+        console.debug(' -- done', this.notes);
     }
 
     start() {
-        console.debug('Player#start', this);
-        this.notes.forEach(n => n.start());
+        console.debug('Player#start', this.notes);
+        this.update();
+        this.audioCtx.resume();
     }
 
     stop() {
         console.debug('Player#stop', this);
-        this.notes.forEach(n => n.stop());
+        this.audioCtx.suspend();
     }
 }