disable auto gain control

src/lib/audio.ts

@@ -51,15 +51,16 @@ export class AudioManager {
     audio.play();
     outputDiv.appendChild(audio);
 
-    return new PlayerAudio(this.ac, dest, gain, localPlayer, peerPlayer, globalSpeak);
+    return new PlayerAudio(this.ac, audio, dest, gain, localPlayer, peerPlayer, globalSpeak);
   }
 }
 
 export class PlayerAudio {
   private source: MediaStreamAudioSourceNode | undefined;
-  // private playerWatcher: Readable<[number[], boolean]>;
+  private ender: Unsubscriber;
   constructor(
     private context: AudioContext,
+    private audioElement: HTMLAudioElement,
     private dest: MediaStreamAudioDestinationNode,
     private gain: GainNode,
     localPlayer: Readable<Player | undefined>,
@@ -68,7 +69,7 @@ export class PlayerAudio {
   ) {
     console.log("created player audio");
 
-    subscribe([localPlayer, peerPlayer], ([localPlayer, peerPlayer]) => {
+    this.ender = subscribe([localPlayer, peerPlayer], ([localPlayer, peerPlayer]) => {
       if (!localPlayer || !peerPlayer) {
         this.gain.gain.value = 0;
         // console.warn("missing a player...");
@@ -81,7 +82,7 @@ export class PlayerAudio {
         const [x, y, z] = localInfo.position.map((localPosition, i) => peerInfo.position[i] - localPosition);
         const sameStage = localInfo.stage === peerInfo.stage;
         let magnitude = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2));
-        const max = 3500, min = 750;
+        const max = 3500, min = 1000;
         let scaledGain = 1 - (magnitude - min) / max;
         let t = Math.max(Math.min(scaledGain * +sameStage, 1), 0);
         function easeInExpo(x: number): number {
@@ -105,4 +106,9 @@ export class PlayerAudio {
     gainOut.connect(this.dest);
     // gainOut.connect(this.context.destination);
   }
+
+  delete() {
+    this.audioElement.parentElement?.removeChild(this.audioElement);
+    this.ender();
+  }
 }

src/lib/client.ts

@@ -49,10 +49,20 @@ export class Client {
     return client;
   }
 
+  public close() {
+    this.transport.close({ reason: "reconnecting prolly" });
+    for (const peer of Object.values(this.peers)) {
+      peer.close();
+    }
+  }
+
   private async closeHandler() {
-    await this.transport.closed;
+    try {
+      await this.transport.closed;
+    } catch (_) { }
     console.error("closed");
     this.connected.set(false);
+    this.close();
   }
 
   private getPeer(id: string) {
@@ -227,6 +237,11 @@ export class Peer {
     });
   }
 
+  public close() {
+    this.connection.close();
+    this.playerAudio.delete();
+  }
+
   public async offer() {
     const offer = await this.connection.createOffer({ offerToReceiveAudio: true });
     await this.connection.setLocalDescription(offer);

src/routes/+page.svelte

@@ -4,6 +4,7 @@
   import { AudioManager } from "$lib/audio";
   import { identity, localStore } from "$lib/stores";
   import {
+    get,
     readable,
     readonly,
     type Readable,
@@ -37,20 +38,32 @@
   );
   let client: Client = $state(undefined as any);
   let players: Writable<Record<number, Player>> = undefined as any;
-  let connected: Readable<boolean> = undefined as any;
+  let connected = $state(false);
   let ac: AudioManager;
   let wyrm: HTMLAudioElement;
   let outputAudio: HTMLDivElement;
   async function audioPrep() {
-    let media = $useMusic
-      ? wyrm
-      : await navigator.mediaDevices.getUserMedia({
-          audio: true,
-          video: false,
-        });
+    let media;
+    if ($useMusic) {
+      media = wyrm;
+    } else {
+      media = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          autoGainControl: false,
+          noiseSuppression: true,
+        },
+        video: false,
+      });
+    }
     ac = new AudioManager(media, micVolume, muted);
   }
   async function connect() {
+    if (client) {
+      if (get(client.connected)) {
+        return;
+      }
+      client.close();
+    }
     await audioPrep();
     client = await Client.connect(
       readonly(name),
@@ -63,7 +76,9 @@
       console.log("players", $players);
       players = client.players;
     });
-    connected = readonly(client.connected);
+    client.connected.subscribe(() => {
+      connected = true;
+    });
     console.log(client);
   }
 </script>
@@ -115,8 +130,8 @@
       </div>
     {/if}
   </div>
-  {#if client !== undefined}
-    <input type="checkbox" disabled bind:checked={$connected} />
+  {#if connected}
+    <input type="checkbox" disabled bind:checked={connected} />
     <datalist>
       {#each Object.values($players) as player}
         <option>{player.name}</option>