44 lines
979 B
Svelte
44 lines
979 B
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>
|