Added a Peak Meter

Author: andersnm

src/App.ts

@@ -23,6 +23,89 @@ import { InflictorFactory } from "./audio/plugins/Inflictor";
 import { FilterFactory } from "./audio/plugins/Filter";
 import { ChorusFactory } from "./audio/plugins/Chorus";
 
+class PeakMeter implements IComponent {
+    app: Appl;
+    container: HTMLDivElement;
+    canvas: HTMLCanvasElement;
+    analyserNode: AnalyserNode;
+    dataArray: Uint8Array;
+    intervalId: number | null = null;
+
+    constructor(app: Appl) {
+        this.app = app;
+
+        this.container = document.createElement("div");
+        this.container.classList.add("flex", "items-center", "w-48", "bg-neutral-900", "rounded");
+
+        this.canvas = document.createElement("canvas");
+        this.canvas.width = 192;
+        this.canvas.height = 32;
+        this.canvas.style.display = "block";
+        this.container.appendChild(this.canvas);
+    }
+
+    onUpdate = () => {
+        this.analyserNode.getByteTimeDomainData(this.dataArray as Uint8Array<ArrayBuffer>); // WTF
+
+        let max = 0;
+        for (let i = 0; i < this.dataArray.length; i++) {
+            max = Math.max(Math.abs(this.dataArray[i] - 128), max);
+        }
+
+        const level = Math.log10(1 + max) / Math.log10(128) * 100;
+
+        const width = this.canvas.width;
+        const height = this.canvas.height;
+        const fillWidth = (level / 100) * width;
+
+        const context = this.canvas.getContext("2d");
+        context.clearRect(0, 0, width, height);
+
+        const greenEnd = 0.7 * width;
+        if (fillWidth > 0) {
+            context.fillStyle = "green";
+            context.fillRect(0, 0, Math.min(fillWidth, greenEnd), height);
+        }
+
+        const yellowEnd = 0.8 * width;
+        if (fillWidth > greenEnd) {
+            context.fillStyle = "yellow";
+            context.fillRect(greenEnd, 0, Math.min(fillWidth, yellowEnd) - greenEnd, height);
+        }
+
+        if (fillWidth > yellowEnd) {
+            context.fillStyle = "red";
+            context.fillRect(yellowEnd, 0, fillWidth - yellowEnd, height);
+        }
+    }
+
+    setDevice() {
+        this.stopPolling();
+
+        this.analyserNode = new AnalyserNode(this.app.device.context, {
+            fftSize: 1024,
+        });
+
+        this.app.device.masterGainNode.connect(this.analyserNode);
+
+        const bufferLength = this.analyserNode.frequencyBinCount;
+        this.dataArray = new Uint8Array(bufferLength);
+
+        this.intervalId = window.setInterval(this.onUpdate, 25);
+    }
+
+    stopPolling() {
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+
+    getDomNode(): Node {
+        return this.container;
+    }
+}
+
 class BpmInput implements IComponent {
 
     app: Appl;
@@ -65,6 +148,7 @@ export class Appl extends CommandHost implements IComponent {
     fullscreen: FullScreen;
     menuBar: MenuBar;
     bpmInput: BpmInput;
+    peakMeter: PeakMeter;
     toolbar: HTMLElement;
     frame: GridFrameContainer;
     mainTabs: TabFrameContainer;
@@ -137,8 +221,9 @@ export class Appl extends CommandHost implements IComponent {
         ]);
 
         this.bpmInput = new BpmInput(this);
+        this.peakMeter = new PeakMeter(this);
 
-        const toolbarContainer = HFlex([toolbar, this.bpmInput.getDomNode()], "gap-1");
+        const toolbarContainer = HFlex([toolbar, this.bpmInput.getDomNode(), this.peakMeter.getDomNode()], "gap-1");
 
         this.mainTabs = new TabFrameContainer(false);
 
@@ -226,9 +311,11 @@ export class Appl extends CommandHost implements IComponent {
     async setAudioDevice(outputDeviceId: string, inputDeviceId: string, latencySec: number) {
         await this.device.create(outputDeviceId, inputDeviceId, latencySec);
 
-        this.player = new Player(this.instrumentFactories, this.device.context);
+        this.player = new Player(this.instrumentFactories, this.device);
         this.playerSongAdapter.attachPlayer(this.player);
 
+        this.peakMeter.setDevice();
+
         await this.writeSetting("OutputDevice", outputDeviceId);
         await this.writeSetting("InputDevice", inputDeviceId);
         await this.writeSetting("Latency", latencySec);

src/audio/AudioDevice.ts

@@ -12,6 +12,7 @@ export class AudioDevice {
     context: AudioContext | null = null;
     inputNode: MediaStreamAudioSourceNode;
     recorder: Recorder;
+    masterGainNode: GainNode
     inputMode: "stereo" | "left" | "right";
 
     constructor() {
@@ -48,6 +49,9 @@ export class AudioDevice {
 
         this.recorder = new Recorder(this.context);
         this.inputNode.connect(this.recorder.recordNode);
+
+        this.masterGainNode = new GainNode(this.context, { gain: 1.0 });
+        this.masterGainNode.connect(this.context.destination);
     }
 
     async close() {

src/audio/Player.ts

@@ -1,3 +1,4 @@
+import { AudioDevice } from "./AudioDevice";
 import { Instrument, InstrumentFactory } from "./plugins/InstrumentFactory";
 import { PatternColumnType } from "./SongDocument";
 
@@ -110,7 +111,7 @@ class PatternPlayer {
 }
 
 export class Player extends EventTarget {
-    context: AudioContext;
+    device: AudioDevice;
     playing: boolean = false;
     startTime: number;
     currentTime: number;
@@ -126,10 +127,10 @@ export class Player extends EventTarget {
     loopEnd: number = 8;
     playingPatterns: PatternPlayer[] = [];
 
-    constructor(instrumentFactories: InstrumentFactory[], context: AudioContext) {
+    constructor(instrumentFactories: InstrumentFactory[], device: AudioDevice) {
         super();
         this.instrumentFactories = instrumentFactories;
-        this.context = context;
+        this.device = device;
     }
 
     getInstrumentFactoryById(id: string) {
@@ -153,14 +154,14 @@ export class Player extends EventTarget {
 
         this.currentTime = 0;
         this.currentBeat = startBeat;
-        this.startTime = this.context.currentTime;
+        this.startTime = this.device.context.currentTime;
 
         // schedule 1 second first, then reschedule after 500ms to fill so we remain 1 second ahead
         this.scheduleSequence(SCHEDULE_INTERVAL);
 
         this.playInterval = setInterval(() => {
 
-            const until = this.context.currentTime + SCHEDULE_INTERVAL;
+            const until = this.device.context.currentTime + SCHEDULE_INTERVAL;
             const duration = until - (this.startTime + this.currentTime);
 
             // console.log("Player time", this.currentTime, "Duration", duration, "Dvic time", this.context.currentTime, "relative to", this.startTime, " compute beat", this.currentBeat);

src/audio/PlayerSongAdapter.ts

@@ -182,7 +182,7 @@ export class PlayerSongAdapter {
             return;
         }
 
-        const instrument = factory.createInstrument(this.player.context, this.player);
+        const instrument = factory.createInstrument(this.player.device.context, this.player);
 
         this.player.instruments.push(instrument);
         this.instrumentMap.set(i, instrument);
@@ -221,7 +221,7 @@ export class PlayerSongAdapter {
         const connection = new Connection();
         connection.from = this.instrumentMap.get(c.from);
         connection.to = this.instrumentMap.get(c.to);
-        connection.gainNode = this.player.context.createGain();
+        connection.gainNode = this.player.device.context.createGain();
         connection.gainNode.gain.setValueAtTime(c.gain, 0);
 
         connection.from.connect(connection.gainNode);
@@ -233,7 +233,7 @@ export class PlayerSongAdapter {
 
     onUpdateConnection = (ev: CustomEvent<ConnectionDocument>) => {
         const connection = this.connectionMap.get(ev.detail);
-        connection.gainNode.gain.linearRampToValueAtTime(ev.detail.gain, this.player.context.currentTime + 0.050);
+        connection.gainNode.gain.linearRampToValueAtTime(ev.detail.gain, this.player.device.context.currentTime + 0.050);
     }; 
 
     onDeleteConnection = (ev: CustomEvent<ConnectionDocument>) => {
@@ -255,7 +255,7 @@ export class PlayerSongAdapter {
 
         const instrument = this.instrumentMap.get(w.instrument);
 
-        const audioBuffer = this.player.context.createBuffer(w.buffers.length, w.sampleCount, w.sampleRate);
+        const audioBuffer = this.player.device.context.createBuffer(w.buffers.length, w.sampleCount, w.sampleRate);
         for (let i = 0; i < w.buffers.length; i++) {
             const buffer = audioBuffer.getChannelData(i);
             buffer.set(w.buffers[i]);
@@ -281,7 +281,7 @@ export class PlayerSongAdapter {
         wave.name = w.name;
 
         if (w.sampleCount !== wave.sampleCount) {
-            const audioBuffer = this.player.context.createBuffer(w.buffers.length, w.sampleCount, w.sampleRate);
+            const audioBuffer = this.player.device.context.createBuffer(w.buffers.length, w.sampleCount, w.sampleRate);
             for (let i = 0; i < w.buffers.length; i++) {
                 const buffer = audioBuffer.getChannelData(i);
                 buffer.set(w.buffers[i]);

src/audio/plugins/Master.ts

@@ -1,22 +1,23 @@
+import { Player } from "../Player";
 import { Instrument, InstrumentFactory } from "./InstrumentFactory";
 
 export class MasterFactory extends InstrumentFactory {
     get identifier(): string {
         return "@modulyzer/Master";
     }
 
-    createInstrument(context: AudioContext): Instrument {
-        return new Master(context, this);
+    createInstrument(context: AudioContext, player: Player): Instrument {
+        return new Master(this, player);
     }
 }
 
 export class Master extends Instrument {
-    context: AudioContext;
+    player: Player;
 
-    constructor(context: AudioContext, factory: InstrumentFactory) {
+    constructor(factory: InstrumentFactory, player: Player) {
         super(factory);
         this.outputNode = null;
-        this.inputNode = context.destination;
+        this.inputNode = player.device.masterGainNode;
         this.parameters = [];
     }