Use solidjs-store for reactivity (#12)

* Reduce control panel rerenders

* Fix button text colour on iOS

* Only show 9 buttons on small screen

* Move beep out of default 12

* Unmute audio on iOS

* Memoise model hooks

* Fix linter issues

* Use global signal for AudioContext

also add docstrings for tsdoc

* Use CSS module for App

* Rewrite using solid-store

* Add persistence in localStorage

* Display knob block

* Modal use css module

* Update docstring

* Use CSS modules

* Safer parse localStorage

* Drop console logs

* Removed unused

.eslintrc.yml

@@ -0,0 +1,21 @@
+env:
+  browser: true
+  es2022: true
+extends:
+  - 'eslint:recommended'
+  - 'plugin:@typescript-eslint/recommended'
+parser: '@typescript-eslint/parser'
+plugins:
+  - '@typescript-eslint'
+  - 'simple-import-sort'
+root: true
+rules:
+  # Non-null assertions used for refs in solidJS
+  '@typescript-eslint/no-non-null-assertion': 0
+  '@typescript-eslint/no-unused-vars': 'error'
+  '@typescript-eslint/explicit-function-return-type':
+    - error
+    - allowExpressions: true
+
+  simple-import-sort/imports:
+    - error

package.json

@@ -24,7 +24,9 @@
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
     "eslint": "^8.33.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-solid": "^0.9.4",
+    "eslint-plugin-tsdoc": "^0.2.17",
     "postcss": "^8.4.21",
     "postcss-nesting": "^10.2.0",
     "prettier": "^2.8.2",

src/audio/AudioCtx.ts

@@ -0,0 +1,33 @@
+import { createSignal } from 'solid-js';
+import { unmute } from 'src/audio/unmute';
+
+const [AudioCtx, setAudioCtx] = createSignal<AudioContext | null>(null);
+
+/**
+ * Activates the Global Audio Context signal
+ *
+ * Must be used in a user interaction callback (ie onclick) to initialise the context in an active state
+ * @param contextOptions - Options to pass to the new AudioContext
+ * @param force - Initialise a new AudioContext even if another is running
+ */
+function activateAudioCtx(
+  contextOptions?: AudioContextOptions,
+  force = false,
+): void {
+  if (!force && AudioCtx()) {
+    return;
+  }
+  const ctx = new AudioContext(contextOptions);
+  unmute(ctx);
+  setAudioCtx(ctx);
+}
+
+export {
+  /**
+   * # AudioCtx
+   * ## Description
+   * Global AudioContext signal
+   */
+  AudioCtx,
+  activateAudioCtx,
+};

src/audio/AudioPlayerNode.ts

@@ -2,9 +2,10 @@
 // https://github.com/WebAudio/web-audio-api/issues/2397#issuecomment-459514360
 
 /**
- * AudioPlayerNode
- * Composite Web Audio API Node that tracks the playback position
- * and playing state of the underlying AudioBufferSourceNode
+ * # AudioPlayerNode
+ * ## Description
+ * A composite Web Audio API Node that tracks the state and playback position
+ * of the underlying AudioBufferSourceNode
  */
 export class AudioPlayerNode {
   public readonly audio: AudioBufferSourceNode;
@@ -14,6 +15,11 @@ export class AudioPlayerNode {
   private _analyser: AnalyserNode;
   private _playing = false;
 
+  /**
+   * Instantiate a new AudioPlayerNode
+   * @param context - AudioContext to run the AudioPlayerNode in
+   * @param options - Options to pass to the underlying AudioBufferSourceNode
+   */
   constructor(context: AudioContext, options?: AudioBufferSourceOptions) {
     // Initialize component audio nodes
     this.audio = new AudioBufferSourceNode(context, options);
@@ -30,22 +36,22 @@ export class AudioPlayerNode {
   /**
    * Gets the current playback position [0, 1]
    */
-  get playbackPosition() {
+  get playbackPosition(): number {
     this._analyser.getFloatTimeDomainData(this._sampleHolder);
     return this._sampleHolder[0];
   }
 
   /**
-   * true if buffer is currently playing
+   * True if buffer is currently playing
    */
-  get playing() {
+  get playing(): boolean {
     return this._playing;
   }
 
   /** Creates an AudioBuffer with an extra `position` track
-   * @param buffer AudioBuffer to load into node
+   * @param buffer - AudioBuffer to load into node
    * */
-  public loadBuffer(audioBuffer: AudioBuffer) {
+  public loadBuffer(audioBuffer: AudioBuffer): void {
     // Create a new AudioBuffer of the same length as param with one extra channel
     // load it into the AudioBufferSourceNode
     const n_channels = Math.max(audioBuffer.numberOfChannels, 3);
@@ -85,19 +91,31 @@ export class AudioPlayerNode {
     this._splitter.connect(this._analyser, p_channel);
   }
 
-  get playbackRate() {
+  get playbackRate(): AudioParam {
     return this.audio.playbackRate;
   }
 
-  start(...args: Parameters<AudioBufferSourceNode['start']>) {
+  /**
+   * Begins playback of the audio data contained in the buffer.
+   */
+  start(): void {
     this._playing = true;
-    this.audio.start(...args);
+    this.audio.start();
   }
 
-  stop(when?: number | undefined): void {
-    this.audio.stop(when);
+  /**
+   * Stops playback of the audio data contained in the buffer.
+   */
+  stop(): void {
+    this.audio.stop();
   }
 
+  /**
+   * Connect the audio output of this node to a destination node
+   * @param destinationNode
+   * @param output
+   * @returns
+   */
   connect(destinationNode: AudioNode, output?: number | undefined): AudioNode {
     return this._audioOut.connect(destinationNode, output);
   }

src/audio/index.ts

@@ -1,2 +1,3 @@
-export * from './AudioContextManager';
+export * from './AudioCtx';
 export * from './AudioPlayerNode';
+export * from './unmute';