add code

frontend/shared/AudioWave.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+  
+    export let numBars = 16;
+    export let stream_state: "open" | "closed" = "closed";
+    export let audio_source: HTMLAudioElement;
+  
+    let audioContext: AudioContext;
+    let analyser;
+    let dataArray;
+    let animationId;
+    let is_muted = false;
+  
+    $: containerWidth = `calc((var(--boxSize) + var(--gutter)) * ${numBars})`;
+
+    $: if(stream_state === "open") setupAudioContext()
+  
+    onDestroy(() => {
+      if (animationId) {
+        cancelAnimationFrame(animationId);
+      }
+      if (audioContext) {
+        audioContext.close();
+      }
+    });
+  
+    function setupAudioContext() {
+      console.log("set up")
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      analyser = audioContext.createAnalyser();
+      console.log("audio_source", audio_source.srcObject);
+      const source = audioContext.createMediaStreamSource(audio_source.srcObject);
+      source.connect(analyser);
+      analyser.connect(audioContext.destination);
+  
+      analyser.fftSize = 64;
+      dataArray = new Uint8Array(analyser.frequencyBinCount);
+  
+      updateBars();
+    }
+  
+    function updateBars() {
+      analyser.getByteFrequencyData(dataArray);
+      
+      const bars = document.querySelectorAll('.box');
+      for (let i = 0; i < bars.length; i++) {
+        const barHeight = (dataArray[i] / 255) * 2; // Amplify the effect
+        bars[i].style.transform = `scaleY(${Math.max(0.1, barHeight)})`;
+      }
+  
+      animationId = requestAnimationFrame(updateBars);
+    }
+  
+    function togglePlayPause() {
+      if (is_muted) {
+        audio_source.muted = false;
+      } else {
+        audio_source.muted = true;
+      }
+      is_muted = !is_muted;
+    }
+  
+</script>
+  
+  <div class="waveContainer">
+    <div class="boxContainer" style:width={containerWidth}>
+      {#each Array(numBars) as _}
+        <div class="box"></div>
+      {/each}
+    </div>
+    <button class="playPauseButton" on:click={togglePlayPause}>
+      {is_muted ? '🔈' : '🔇'}
+    </button>
+  </div>
+  
+  <style>
+    .waveContainer {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  
+    .boxContainer {
+      display: flex;
+      justify-content: space-between;
+      height: 64px;
+      --boxSize: 8px;
+      --gutter: 4px;
+    }
+  
+    .box {
+      height: 100%;
+      width: var(--boxSize);
+      background: var(--color-accent);
+      border-radius: 8px;
+      transition: transform 0.05s ease;
+    }
+  
+    .playPauseButton {
+      margin-top: 10px;
+      padding: 10px 20px;
+      font-size: 24px;
+      cursor: pointer;
+      background: none;
+      border: none;
+      border-radius: 5px;
+      color: black;
+    }
+  
+    :global(body) {
+      display: flex;
+      justify-content: center;
+      background: black;
+      margin: 0;
+      padding: 0;
+      align-items: center;
+      height: 100vh;
+      color: white;
+      font-family: Arial, sans-serif;
+    }

frontend/shared/StaticAudio.svelte

@@ -9,6 +9,7 @@
     import { onMount } from "svelte";
 
     import { start, stop } from "./webrtc_utils";
+    import AudioWave from "./AudioWave.svelte";
 
 
     export let value: string | null = null;
@@ -56,7 +57,6 @@
                 ]
             };
             pc = new RTCPeerConnection(rtc_configuration);
-            console.log("config", pc.getConfiguration());
             pc.addEventListener("connectionstatechange",
                 async (event) => {
                    switch(pc.connectionState) {
@@ -95,12 +95,14 @@
 <audio
     class="standard-player"
     class:hidden={value === "__webrtc_value__"}
-    controls
     on:load
     bind:this={audio_player}
     on:ended={() => dispatch("stop")}
     on:play={() => dispatch("play")}
 />
+{#if value !== "__webrtc_value__"}
+    <AudioWave audio_source={audio_player} {stream_state}/>
+{/if}
 {#if value === "__webrtc_value__"}
 	<Empty size="small">
 		<Music />