[ui] add audio timeline
This commit is contained in:
parent
f456478f78
commit
544b79d274
1 changed files with 16 additions and 0 deletions
|
@ -7,6 +7,7 @@
|
|||
export let detail: boolean;
|
||||
|
||||
let containerEl: HTMLDivElement;
|
||||
let timelineEl: HTMLDivElement;
|
||||
let loaded = false;
|
||||
|
||||
let wavesurfer: WaveSurfer;
|
||||
|
@ -14,6 +15,11 @@
|
|||
|
||||
onMount(async () => {
|
||||
const WaveSurfer = await import("wavesurfer.js");
|
||||
const TimelinePlugin = await import("wavesurfer.js/src/plugin/timeline");
|
||||
const timelineColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue("--foreground");
|
||||
|
||||
wavesurfer = WaveSurfer.default.create({
|
||||
container: containerEl,
|
||||
waveColor: "#dc322f",
|
||||
|
@ -22,6 +28,15 @@
|
|||
backend: "MediaElement",
|
||||
mediaControls: true,
|
||||
xhr: { cache: "force-cache" },
|
||||
plugins: [
|
||||
TimelinePlugin.default.create({
|
||||
container: timelineEl,
|
||||
primaryColor: timelineColor,
|
||||
primaryFontColor: timelineColor,
|
||||
secondaryColor: timelineColor,
|
||||
secondaryFontColor: timelineColor,
|
||||
}),
|
||||
],
|
||||
});
|
||||
wavesurfer.on("ready", () => {
|
||||
loaded = true;
|
||||
|
@ -34,6 +49,7 @@
|
|||
{#if !loaded}
|
||||
<Spinner centered />
|
||||
{/if}
|
||||
<div class="wavesurfer-timeline" bind:this={timelineEl} />
|
||||
<div class="wavesurfer" bind:this={containerEl} />
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in a new issue