Skip to content
Data, new

Waveform Player

A real WebAudio player for a deterministic forty-second synthesized clip, with a DPR waveform, heat-following playhead, chapters, scrubbing, speed and volume.

$149 once · every Pro piece

Customize

Install

npx shadcn@latest add @obsyde/waveform-player

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { WaveformPlayer } from '@/components/obsyde/ember/waveform-player/WaveformPlayer';

export function Example() {
  return (
    <WaveformPlayer />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/waveform-player/WaveformPlayer.tsxcomponent
  • ember/waveform-player/waveform-player.cssstyles
  • ember/waveform-player/audio.tsmodule
  • ember/waveform-player/WaveformPlayerDemo.tsxdemo
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/RollingNumber.tsxshared
  • ember/kit2-kit/kit.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
barWidthBar widthnumber2
showChaptersChaptersbooleantrue
glowAccent glowbooleantrue