[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;
|
export let detail: boolean;
|
||||||
|
|
||||||
let containerEl: HTMLDivElement;
|
let containerEl: HTMLDivElement;
|
||||||
|
let timelineEl: HTMLDivElement;
|
||||||
let loaded = false;
|
let loaded = false;
|
||||||
|
|
||||||
let wavesurfer: WaveSurfer;
|
let wavesurfer: WaveSurfer;
|
||||||
|
@ -14,6 +15,11 @@
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const WaveSurfer = await import("wavesurfer.js");
|
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({
|
wavesurfer = WaveSurfer.default.create({
|
||||||
container: containerEl,
|
container: containerEl,
|
||||||
waveColor: "#dc322f",
|
waveColor: "#dc322f",
|
||||||
|
@ -22,6 +28,15 @@
|
||||||
backend: "MediaElement",
|
backend: "MediaElement",
|
||||||
mediaControls: true,
|
mediaControls: true,
|
||||||
xhr: { cache: "force-cache" },
|
xhr: { cache: "force-cache" },
|
||||||
|
plugins: [
|
||||||
|
TimelinePlugin.default.create({
|
||||||
|
container: timelineEl,
|
||||||
|
primaryColor: timelineColor,
|
||||||
|
primaryFontColor: timelineColor,
|
||||||
|
secondaryColor: timelineColor,
|
||||||
|
secondaryFontColor: timelineColor,
|
||||||
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
wavesurfer.on("ready", () => {
|
wavesurfer.on("ready", () => {
|
||||||
loaded = true;
|
loaded = true;
|
||||||
|
@ -34,6 +49,7 @@
|
||||||
{#if !loaded}
|
{#if !loaded}
|
||||||
<Spinner centered />
|
<Spinner centered />
|
||||||
{/if}
|
{/if}
|
||||||
|
<div class="wavesurfer-timeline" bind:this={timelineEl} />
|
||||||
<div class="wavesurfer" bind:this={containerEl} />
|
<div class="wavesurfer" bind:this={containerEl} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue