upend/webui/src/components/display/blobs/AudioViewer.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import type WaveSurfer from "wavesurfer.js";
  import Spinner from "../../utils/Spinner.svelte";

  export let address: string;
  export let detail: boolean;

  let containerEl: HTMLDivElement;
  let loaded = false;

  let wavesurfer: WaveSurfer;
  $: if (wavesurfer) wavesurfer.drawBuffer() && detail;

  onMount(async () => {
    const WaveSurfer = await import("wavesurfer.js");
    wavesurfer = WaveSurfer.default.create({
      container: containerEl,
      waveColor: "#dc322f",
      progressColor: "#991c1a",
      responsive: true,
      backend: "MediaElement",
      mediaControls: true,
    });
    wavesurfer.on("ready", () => {
      loaded = true;
    });
    wavesurfer.load(`api/raw/${address}`);
  });
</script>

<div class="audio">
  {#if !loaded}
    <Spinner centered />
  {/if}
  <div class="wavesurfer" bind:this={containerEl} />
</div>

<style lang="scss">
  .audio {
    width: 100%;
  }
</style>