[ui] use wavesurfer for audio playback

webui/package.json

@@ -19,6 +19,7 @@
     "@types/lodash": "^4.14.178",
     "@types/lru-cache": "^5.1.1",
     "@types/three": "^0.135.0",
+    "@types/wavesurfer.js": "^6.0.0",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "@yarnpkg/fslib": "^2.6.0",
@@ -56,7 +57,8 @@
     "sswr": "^1.3.1",
     "svelte-navigator": "^3.1.5",
     "three": "^0.136.0",
-    "upend": "../tools/upend_js"
+    "upend": "../tools/upend_js",
+    "wavesurfer.js": "^6.0.1"
   },
   "packageManager": "yarn@3.1.0"
 }

webui/src/components/display/BlobPreview.svelte

@@ -41,7 +41,7 @@
       </div>
     {/if}
     {#if audio}
-      <AudioViewer {address} />
+      <AudioViewer {address} {detail} />
     {/if}
     {#if video}
       {#if imageLoaded != address}

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

@@ -1,28 +1,43 @@
 <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 imageLoaded = null;
+  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 imageLoaded != address}
-    <Spinner />
+  {#if !loaded}
+    <Spinner centered />
   {/if}
-  <img
-    src="api/thumb/{address}"
-    alt={address}
-    on:load={() => (imageLoaded = address)}
-    on:error={() => (imageLoaded = address)}
-  />
-  <audio controls preload="auto" src="api/raw/{address}" />
+  <div class="wavesurfer" bind:this={containerEl} />
 </div>
 
 <style lang="scss">
   .audio {
-    max-width: 100%;
-    display: flex;
-    flex-direction: column;
+    width: 100%;
   }
 </style>

webui/yarn.lock

@@ -410,6 +410,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/debounce@npm:*":
+  version: 3.0.0
+  resolution: "@types/debounce@npm:3.0.0"
+  checksum: af99f44f8ce90388aa5a909066c64b4ddc5efdff72bccf7dcef1fe8a04f03d03a7a42cc1f42ff14620c66923f92600ccfeb768bd77ad250f12a6ebca116ca719
+  languageName: node
+  linkType: hard
+
 "@types/emscripten@npm:^1.38.0":
   version: 1.39.6
   resolution: "@types/emscripten@npm:1.39.6"
@@ -524,6 +531,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/wavesurfer.js@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@types/wavesurfer.js@npm:6.0.0"
+  dependencies:
+    "@types/debounce": "*"
+  checksum: 0fb7ec6ff558dc137f0e3b5f24208ab8ecfd97d2bcb65da1e9cd8360303a4adc41508b9854e5f98da70813bf3c59571066a932f1caeefc6dece4733ba122e579
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^5.10.1":
   version: 5.10.1
   resolution: "@typescript-eslint/eslint-plugin@npm:5.10.1"
@@ -4267,6 +4283,7 @@ __metadata:
     "@types/lodash": ^4.14.178
     "@types/lru-cache": ^5.1.1
     "@types/three": ^0.135.0
+    "@types/wavesurfer.js": ^6.0.0
     "@typescript-eslint/eslint-plugin": ^5.10.1
     "@typescript-eslint/parser": ^5.10.1
     "@yarnpkg/fslib": ^2.6.0
@@ -4302,6 +4319,7 @@ __metadata:
     tslib: ^2.0.0
     typescript: ^4.0.0
     upend: ../tools/upend_js
+    wavesurfer.js: ^6.0.1
   languageName: unknown
   linkType: soft
 
@@ -4704,6 +4722,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wavesurfer.js@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "wavesurfer.js@npm:6.0.1"
+  checksum: 0760adb48e60418de223fe4b2bfe31a049168d3ad8ac53f66029e96df6dfdb109ab59d2f81ab568940c1a6573aab8bf1686314fb55a4d616a65367a08f7f7666
+  languageName: node
+  linkType: hard
+
 "which-boxed-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-boxed-primitive@npm:1.0.2"