wavesurfer-solidjs

A solidJS component and hook for wavesurfer.js.

It makes it easy to use wavesurfer from solidJS. All of the familiar wavesurfer options become solidJS props.

You can subscribe to various wavesurfer events also via props. Just prepend an event name with on, e.g. ready -> onReady. Each event callback receives a wavesurfer instance as the first argument.

Installation

With yarn:

yarn add wavesurfer.js wavesurfer-solidjs

With npm:

npm install wavesurfer.js wavesurfer-solidjs

Usage

As a component:

import WavesurferPlayer from "wavesurfer-solidjs";

const App = () => {
  const [getWavesurfer, setWavesurfer] = createSignal(null);
  const [getIsPlaying, setIsPlaying] = createSignal(false);

  const onReady = (ws) => {
    setWavesurfer(ws);
    setIsPlaying(false);
  };

  const onPlayPause = () => {
    getWavesurfer()?.playPause();
  };

  return (
    <>
      <WavesurferPlayer
        height={100}
        waveColor="violet"
        url="/my-server/audio.wav"
        onReady={onReady}
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
      />

      <button onClick={onPlayPause}>{getIsPlaying() ? "Pause" : "Play"}</button>
    </>
  );
};

Alternatively, as a hook:

import { createWavesurfer } from "wavesurfer-solidjs";

const App = () => {
  let containerRef;
  const [getUrl, setUrl] = createSignal(null);

  const { wavesurfer, isReady, isPlaying, currentTime } = createWavesurfer({
    getContainer: () => containerRef,
    url: getUrl(), // get url() { return getUrl() } // For reactivity
    waveColor: "purple",
    height: 100,
  });

  return <div ref={(el) => (containerRef = el)} />;
};

Docs

https://wavesurfer.xyz