release v0.0.3: make notePlayer a functional class

Author: J43fura

demo/src/components/PlayNote.vue

@@ -24,45 +24,34 @@
 </template>
 
 <script setup lang="ts">
-import { getAudioContext } from 'noteplayer'
+import { notePlayer } from 'noteplayer'
 import { computed, ref, watch } from 'vue'
 
 const note_frequency = ref(440)
 const note_frequency_text = 'Frequency'
 
+const np = new notePlayer()
+
 const is_playing = ref(false)
 const play_button_text = computed(() => (!is_playing.value ? 'Start note' : '🔊 Playing note...'))
 
-// create web audio api context
-// const audioCtx = new AudioContext()
-
-const audioCtx = getAudioContext()
-
-// create Oscillator node
-const oscillator = audioCtx.createOscillator()
-oscillator.type = 'sine'
-
-const gainNode = audioCtx.createGain()
-oscillator.connect(gainNode)
-oscillator.start()
-
 function playNote() {
   if (!is_playing.value) {
     is_playing.value = true
-    gainNode.connect(audioCtx.destination)
+    np.play()
   } else {
-    gainNode.disconnect(audioCtx.destination)
     is_playing.value = false
+    np.stop()
   }
 }
 
 watch(note_frequency, () => {
-  oscillator.frequency.setValueAtTime(note_frequency.value, audioCtx.currentTime)
+  np.setFrequency(note_frequency.value) // set frequency
 })
 
 const volume = ref(50)
 const volume_text = 'Volume'
 watch(volume, () => {
-  gainNode.gain.value = volume.value / 100
+  np.setGain(volume.value / 100)
 })
 </script>

dist/index.d.ts

@@ -1,3 +1,15 @@
-declare function getAudioContext(): AudioContext;
+declare class notePlayer {
+    private audioCtx;
+    private gainNode;
+    private oscillator;
+    private DEFAULT_FREQUENCY;
+    constructor();
+    private setOscillatorDefaultSettings;
+    setOscillatorType(type: OscillatorType): void;
+    setFrequency(frequency: number): void;
+    setGain(gain: number): void;
+    play(frequency?: number): void;
+    stop(): void;
+}
 
-export { getAudioContext };
+export { notePlayer };

dist/index.js

@@ -1,8 +1,46 @@
 // src/index.ts
-function getAudioContext() {
-  const audioCtx = new AudioContext();
-  return audioCtx;
-}
+var notePlayer = class {
+  audioCtx;
+  gainNode;
+  oscillator;
+  DEFAULT_FREQUENCY = 440;
+  constructor() {
+    this.audioCtx = new AudioContext();
+    this.gainNode = this.audioCtx.createGain();
+    this.oscillator = this.audioCtx.createOscillator();
+    this.oscillator.connect(this.gainNode);
+    this.setOscillatorDefaultSettings();
+    this.oscillator.start();
+  }
+  setOscillatorDefaultSettings() {
+    this.oscillator.frequency.setValueAtTime(
+      this.DEFAULT_FREQUENCY,
+      this.audioCtx.currentTime
+    );
+    this.oscillator.type = "sine";
+  }
+  setOscillatorType(type) {
+    this.oscillator.type = type;
+  }
+  setFrequency(frequency) {
+    this.oscillator.frequency.setValueAtTime(
+      frequency,
+      this.audioCtx.currentTime
+    );
+  }
+  setGain(gain) {
+    this.gainNode.gain.setValueAtTime(gain, this.audioCtx.currentTime);
+  }
+  play(frequency) {
+    if (frequency) {
+      this.setFrequency(frequency);
+    }
+    this.gainNode.connect(this.audioCtx.destination);
+  }
+  stop() {
+    this.gainNode.disconnect(this.audioCtx.destination);
+  }
+};
 export {
-  getAudioContext
+  notePlayer
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "noteplayer",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "",
   "main": "./dist/ index.js",
   "types": "./dist/index.d.ts",

src/index.ts

@@ -1,4 +1,48 @@
-export function getAudioContext() {
-  const audioCtx = new AudioContext();
-  return audioCtx;
+export class notePlayer {
+  private audioCtx: AudioContext;
+  private gainNode: GainNode;
+  private oscillator: OscillatorNode;
+  private DEFAULT_FREQUENCY = 440;
+  constructor() {
+    this.audioCtx = new AudioContext();
+
+    this.gainNode = this.audioCtx.createGain();
+
+    this.oscillator = this.audioCtx.createOscillator();
+    this.oscillator.connect(this.gainNode);
+
+    this.setOscillatorDefaultSettings();
+    this.oscillator.start();
+  }
+
+  private setOscillatorDefaultSettings() {
+    this.oscillator.frequency.setValueAtTime(
+      this.DEFAULT_FREQUENCY,
+      this.audioCtx.currentTime
+    );
+    this.oscillator.type = "sine";
+  }
+
+  setOscillatorType(type: OscillatorType) {
+    this.oscillator.type = type;
+  }
+  setFrequency(frequency: number) {
+    this.oscillator.frequency.setValueAtTime(
+      frequency,
+      this.audioCtx.currentTime
+    );
+  }
+  setGain(gain: number) {
+    this.gainNode.gain.setValueAtTime(gain, this.audioCtx.currentTime);
+  }
+
+  play(frequency?: number) {
+    if (frequency) {
+      this.setFrequency(frequency);
+    }
+    this.gainNode.connect(this.audioCtx.destination);
+  }
+  stop() {
+    this.gainNode.disconnect(this.audioCtx.destination);
+  }
 }