Big progress on core audio/playlist service

src/app/components/analyser/Analyser.ts

@@ -0,0 +1,62 @@
+import {AfterViewInit, Component, effect, ElementRef, inject, OnInit, ViewChild, viewChild} from '@angular/core';
+import {AudioService} from '../../services/audio.service';
+
+@Component({
+  selector: 'analyser',
+  templateUrl: 'analyser.html',
+})
+export class Analyser implements AfterViewInit {
+  protected audio: AudioService = inject(AudioService);
+  @ViewChild('analyserCanvas') canvasRef!: ElementRef<HTMLCanvasElement>;
+  protected canvas!: HTMLCanvasElement;
+
+  constructor() {
+    effect(() => {
+      if (this.audio.analyser.isRunning()) {
+        requestAnimationFrame(this.draw.bind(this));
+      }
+    })
+  }
+
+  ngAfterViewInit(): void {
+    this.canvas = this.canvasRef.nativeElement as HTMLCanvasElement;
+  }
+
+  draw() {
+    if (!this.audio.analyser.isRunning() || !this.canvas ) return;
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+    const data = this.audio.analyser.analyserData;
+    if (!ctx) return;
+
+    ctx.fillStyle = "rgb(200 200 200)";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "rgb(0 0 0)";
+
+    ctx.beginPath();
+
+    const sliceWidth = canvas.width / data.length;
+
+    let x = 0;
+
+    for (let i = 0; i < data.length; i++) {
+      const v = data[i] / 128.0;
+      const y = (v * canvas.height) / 2;
+
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+
+      x += sliceWidth;
+    }
+
+    ctx.lineTo(canvas.width, canvas.height / 2);
+    ctx.stroke();
+
+    requestAnimationFrame(this.draw.bind(this));
+  }
+}