npm install @waveform-playlist/ui-components react react-dom styled-components

import {
  Channel,
  TimeScale,
  ScrollViewportProvider,
  PlaylistInfoProvider,
  DevicePixelRatioProvider,
  defaultTheme,
} from '@waveform-playlist/ui-components';
import { ThemeProvider } from 'styled-components';

function CustomWaveform({ audioBuffer, samplesPerPixel }) {
  return (
    <ThemeProvider theme={defaultTheme}>
      <DevicePixelRatioProvider>
        <PlaylistInfoProvider
          sampleRate={audioBuffer.sampleRate}
          samplesPerPixel={samplesPerPixel}
        >
          <ScrollViewportProvider>
            <TimeScale
              duration={audioBuffer.duration}
              samplesPerPixel={samplesPerPixel}
              sampleRate={audioBuffer.sampleRate}
            />
            <Channel
              audioBuffer={audioBuffer}
              samplesPerPixel={samplesPerPixel}
              height={128}
            />
          </ScrollViewportProvider>
        </PlaylistInfoProvider>
      </DevicePixelRatioProvider>
    </ThemeProvider>
  );
}

import {
  defaultTheme,
  type WaveformPlaylistTheme,
} from '@waveform-playlist/ui-components';
import { ThemeProvider } from 'styled-components';

const customTheme: Partial<WaveformPlaylistTheme> = {
  ...defaultTheme,
  waveOutlineColor: '#3b82f6',
  waveFillColor: '#60a5fa',
  waveProgressColor: '#1d4ed8',
  backgroundColor: '#0f172a',
  playheadColor: '#f59e0b',
};

function ThemedPlaylist() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your components */}
    </ThemeProvider>
  );
}

import {
  SpectrogramChannel,
  SpectrogramLabels,
} from '@waveform-playlist/ui-components';
import type { SpectrogramConfig } from '@waveform-playlist/core';

const spectrogramConfig: SpectrogramConfig = {
  fftSize: 2048,
  hopSize: 512,
  windowFunction: 'hann',
  frequencyScale: 'linear',
  minFrequency: 0,
  maxFrequency: 22050,
};

function Spectrogram({ audioBuffer }) {
  return (
    <div style={{ display: 'flex' }}>
      <SpectrogramLabels
        config={spectrogramConfig}
        height={256}
      />
      <SpectrogramChannel
        audioBuffer={audioBuffer}
        config={spectrogramConfig}
        colorMap="viridis"
        height={256}
      />
    </div>
  );
}