Waveform — usage examples

Waveform ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Waveform } from '@rozie-ui/wavesurfer-react';

export function Demo() {
  const [time, setTime] = useState(0);
  return (
    <Waveform
      src="/audio.mp3"
      currentTime={time}
      onCurrentTimeChange={setTime}
      timeline
      hover
      onReady={(d) => console.log('duration', d)}
    />
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import Waveform from '@rozie-ui/wavesurfer-vue';

const time = ref(0);
</script>

<template>
  <Waveform
    src="/audio.mp3"
    v-model:currentTime="time"
    :timeline="true"
    :hover="true"
    @ready="(d) => console.log('duration', d)"
  />
</template>

svelte

<script lang="ts">
  import Waveform from '@rozie-ui/wavesurfer-svelte';

  let time = $state(0);
</script>

<Waveform
  src="/audio.mp3"
  bind:currentTime={time}
  timeline
  hover
  onready={(d) => console.log('duration', d)}
/>

import { Component } from '@angular/core';
import { Waveform } from '@rozie-ui/wavesurfer-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Waveform],
  template: `
    <Waveform
      src="/audio.mp3"
      [(currentTime)]="time"
      [timeline]="true"
      [hover]="true"
      (ready)="onReady($event)"
    />
  `,
})
export class DemoComponent {
  time = 0;
  onReady(d: any) { console.log('duration', d); }
}

tsx

import { createSignal } from 'solid-js';
import { Waveform } from '@rozie-ui/wavesurfer-solid';

export function Demo() {
  const [time, setTime] = createSignal(0);
  return (
    <Waveform
      src="/audio.mp3"
      currentTime={time()}
      onCurrentTimeChange={setTime}
      timeline
      hover
      onReady={(d) => console.log('duration', d)}
    />
  );
}

import '@rozie-ui/wavesurfer-lit';

// <rozie-waveform> is a custom element. Bind `src`/`currentTime` as properties
// and listen for `currentTime-change` (the two-way channel) + `ready`.
const el = document.querySelector('rozie-waveform');
el.src = '/audio.mp3';
el.timeline = true;
el.addEventListener('currentTime-change', (e) => { el.currentTime = e.detail; });
el.addEventListener('ready', (e) => console.log('duration', e.detail));

Imperative handle

Beyond props and events, Waveform exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Waveform, type WaveformHandle } from '@rozie-ui/wavesurfer-react';

const wave = useRef<WaveformHandle>(null);
// <Waveform ref={wave} ... />
wave.current?.playPause();
const dur = wave.current?.getDuration();

vue

<script setup>
import { ref } from 'vue';
const wave = ref();      // template ref
</script>

<template>
  <Waveform ref="wave" ... />
  <button @click="wave.playPause()">Play / Pause</button>
</template>

svelte

<script>
  let wave;              // component instance via bind:this
</script>

<Waveform bind:this={wave} ... />
<button onclick={() => wave.playPause()}>Play / Pause</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Waveform) wave!: Waveform;  // or the viewChild() signal
  toggle() { this.wave.playPause(); }
  duration() { return this.wave.getDuration(); }
}

tsx

import { Waveform, type WaveformHandle } from '@rozie-ui/wavesurfer-solid';

let handle: WaveformHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Waveform ref={(h) => (handle = h)} ... />;
handle?.playPause();
const dur = handle?.getDuration();

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-waveform');
el.playPause();
const dur = el.getDuration();

Waveform — usage examples ​

Usage ​

Imperative handle ​

See also ​

Waveform — usage examples

Usage

Imperative handle

See also