Add support for metadata

Author: balloob

index.html

@@ -96,6 +96,7 @@ <h1>Improv Audio Player</h1>
           <div id="status-display" class="status"></div>
           <button class="clear-logs" id="clear-logs-btn">Clear Logs</button>
         </div>
+        <div id="metadata" class="metadata"></div>
       </div>
     </div>
 
@@ -109,6 +110,7 @@ <h1>Improv Audio Player</h1>
       const statusDisplay = document.getElementById("status-display");
       const connectionStatus = document.getElementById("connection-status");
       const clearLogsBtn = document.getElementById("clear-logs-btn");
+      const metadata = document.getElementById("metadata");
 
       playerIdInput.value = `player-${Math.floor(Math.random() * 1000)}`;
       urlInput.value = `ws://${window.location.hostname}:3001`;
@@ -239,6 +241,16 @@ <h1>Improv Audio Player</h1>
             url,
             logger,
           });
+          player.on("metadata-update", (data) => {
+            metadata.innerHTML = data
+              ? `<strong>Metadata:</strong><br><pre>${JSON.stringify(
+                  data,
+                  undefined,
+                  2,
+                )}</pre>`
+              : "";
+            logger.log("Received metadata:", data);
+          });
           player.on("close", (ev) => {
             if (!ev.expected) {
               logger.error("Connection closed unexpectedly");
@@ -249,6 +261,7 @@ <h1>Improv Audio Player</h1>
             player = null;
             connectButton.textContent = "Connect";
             connectionStatus.textContent = "Disconnected";
+            metadata.innerHTML = "";
             logger.log("Disconnected from server");
           });
           player.connect();

server.js

@@ -99,12 +99,38 @@ async function main() {
         wavData.channels,
         wavData.bitDepth,
       );
+      session.sendMetadata({
+        title: "Sample Audio",
+        artist: "Someone on the internet",
+        album: null,
+        year: null,
+        track: null,
+        group_members: [],
+        support_commands: [],
+        repeat: "off",
+        shuffle: false,
+      });
       let start = performance.timeOrigin + performance.now() + 500;
       const timeSlice = 50; // ms
       const bytesPerSlice =
         (timeSlice / 1000) * wavData.sampleRate * wavData.channels;
 
       for (let i = 0; i < wavData.audioData.length; i += bytesPerSlice) {
+        // Mimick metadata update
+        if (i % (bytesPerSlice * 10) === 0) {
+          session.sendMetadata({
+            title: `Sample Audio ${i}`,
+            artist: "Someone on the internet",
+            album: null,
+            year: null,
+            track: null,
+            group_members: [],
+            support_commands: [],
+            repeat: "off",
+            shuffle: false,
+          });
+        }
+
         const chunk = wavData.audioData.slice(i, i + bytesPerSlice);
         session.sendPCMAudioChunk(
           chunk,

src/player/README.md

@@ -48,8 +48,8 @@ Fired when the server information has been updated. Event data is the server inf
 
 ### `session-update`
 
-Fired when the session information has been updated. Event data is the session info.
+Fired when the session information has been updated. Event data is the session info or `null` if no session.
 
 ### `metadata-update`
 
-Fired when the metadata has been updated. Event data is the metadata.
+Fired when the metadata has been updated. Event data is the metadata or `null` if no metadata.

src/player/player.ts

@@ -153,17 +153,19 @@ export class Player extends EventEmitter<Events> {
         break;
 
       case "session/end":
+        this.metadata = null;
         this.sessionInfo = null;
         this.logger.log("Session ended");
+        this.fire("metadata-update", null);
         this.fire("session-update", null);
-        this._sendPlayerTime();
         break;
 
       case "metadata/update":
         this.metadata = this.metadata
           ? { ...this.metadata, ...message.payload }
           : (message.payload as Metadata);
         this.fire("metadata-update", this.metadata);
+        console.log("METADATA UPDATED", this.metadata);
         break;
 
       case "source/time":

src/server/server-session.ts

@@ -2,6 +2,10 @@ import {
   SessionInfo,
   BinaryMessageType,
   SessionEndMessage,
+  Metadata,
+  MetadataUpdateMessage,
+  ClientMessages,
+  ServerMessages,
 } from "../messages.js";
 import type { Logger } from "../logging.js";
 import { ServerClient } from "./server-client.js";
@@ -11,22 +15,57 @@ const HEADER_SIZE = 13;
 export class ServerSession {
   sessionActive: Set<string> = new Set();
 
+  private _lastReportedMetadata: Metadata | null = null;
+
   constructor(
     private readonly sessionInfo: SessionInfo,
     private readonly clients: Map<string, ServerClient>,
     private readonly logger: Logger,
     private readonly onSessionEnd: () => void,
   ) {}
 
-  end() {
-    // Send session end message
+  public sendMetadata(metadata: Metadata) {
+    // we are going to send the whole metadata object if we didn't share one yet
+    // otherwise only include the keys that are different from the last reported metadata
+    let payload: Partial<Metadata>;
+
+    if (!this._lastReportedMetadata) {
+      payload = metadata;
+    } else {
+      payload = {};
+      // Find updated fields
+      for (const key in metadata) {
+        // @ts-ignore
+        if (this._lastReportedMetadata[key] !== metadata[key]) {
+          // @ts-ignore
+          payload[key] = metadata[key];
+        }
+      }
+      if (Object.keys(payload).length === 0) {
+        return;
+      }
+    }
+    this.sendMessage({
+      type: "metadata/update",
+      payload,
+    });
+    this._lastReportedMetadata = this._lastReportedMetadata
+      ? {
+          ...this._lastReportedMetadata,
+          ...payload,
+        }
+      : metadata;
+  }
+
+  public end() {
     const sessionEndMessage: SessionEndMessage = {
       type: "session/end",
       payload: {
         sessionId: this.sessionInfo.session_id,
       },
     };
-
+    // Send session end message to all active clients
+    // Avoid sendMessage as it can activate clients
     for (const clientId of this.sessionActive) {
       const client = this.clients.get(clientId);
       if (client && client.isReady()) {
@@ -37,7 +76,7 @@ export class ServerSession {
     this.onSessionEnd();
   }
 
-  writeAudioPacketHeader(
+  public writeAudioPacketHeader(
     data: DataView,
     timestamp: number,
     sampleCount: number,
@@ -47,13 +86,7 @@ export class ServerSession {
     data.setUint32(9, sampleCount, false); // Sample count (big-endian)
   }
 
-  // Broadcast a binary message to all clients
-  sendBinary(buffer: ArrayBuffer) {
-    if (!this.clients.size) {
-      this.logger.log("No active clients, skipping audio chunk");
-      return;
-    }
-
+  private *_readyClients() {
     for (const client of this.clients.values()) {
       if (!client.isReady()) {
         this.logger.log(`Client ${client.clientId} not ready, skipping`);
@@ -67,8 +100,26 @@ export class ServerSession {
           type: "session/start" as const,
           payload: this.sessionInfo,
         });
+        if (this._lastReportedMetadata) {
+          client.send({
+            type: "metadata/update" as const,
+            payload: this._lastReportedMetadata,
+          });
+        }
         this.sessionActive.add(client.clientId);
       }
+      yield client;
+    }
+  }
+
+  public sendMessage(message: ServerMessages) {
+    for (const client of this._readyClients()) {
+      client.send(message);
+    }
+  }
+
+  sendBinary(buffer: ArrayBuffer) {
+    for (const client of this._readyClients()) {
       client.sendBinary(buffer);
     }
   }