https://github.com/slickcharmer/react-wavesurfer.js

React bindings for wavesurfer.js
https://github.com/slickcharmer/react-wavesurfer.js

canvas react wafesurfer waveform

Last synced: 1 day ago
JSON representation

React bindings for wavesurfer.js

• Host: GitHub
• URL: https://github.com/slickcharmer/react-wavesurfer.js
• Owner: slickcharmer
• License: mit
• Created: 2024-03-15T16:24:58.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-03-15T16:25:12.000Z (8 months ago)
• Last Synced: 2024-04-04T13:17:47.057Z (8 months ago)
• Topics: canvas, react, wafesurfer, waveform
• Language: TypeScript
• Homepage: https://amilajack.github.io/react-wavesurfer.js
• Size: 2.71 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-wavesurfer.js

![Test](https://github.com/amilajack/react-wavesurfer/workflows/Test/badge.svg)

[![NPM version](https://badge.fury.io/js/react-wavesurfer.js.svg)](http://badge.fury.io/js/react-wavesurfer.js)

[![npm](https://img.shields.io/npm/dm/react-wavesurfer.js.svg)](https://npm-stat.com/charts.html?package=react-wavesurfer.js)

## Installation

```bash

# NPM

npm install wavesurfer.js react-wavesurfer.js

# Yarn

yarn add wavesurfer.js react-wavesurfer.js

```

## Basic Usage

See the [live demo](https://codesandbox.io/s/react-wavesurfer-js-w3brk).

```tsx

import React, { useState } from "react";

import Wavesurfer from "react-wavesurfer.js";

function MyWaveform() {

  const [position, setPosition] = useState(0);

  const [muted, setMuted] = useState(false);

  const handlePositionChange = (position) => {

    /* ... */

  };

  const onReadyHandler = () => console.log("done loading!");

  return (

    

  );

}

```

## Zooming (Work in Progress)

```tsx

import React, { useState } from "react";

import Wavesurfer from "react-wavesurfer.js";

function MyWaveform() {

  const [zoomLevel, setZoomLevel] = useState(0);

  const handleInput = (e) => {

    setZoomLevel(e.value);

  };

  return (

    <>

      

      

    >

  );

}

```

## Minimap and Timeline (Work in Progress)

```tsx

import React, { useState } from "react";

import Wavesurfer from "react-wavesurfer.js";

import MiniMap from "react-wavesurfer.js/plugins/minimap";

import Timeline from "react-wavesurfer.js/plugins/timeline";

function MyWaveform() {

  return (

    

      

      

    

  );

}

```

## Roadmap

- [x] Basic Waveform Usage

- [ ] Regions Plugin Support

- [ ] Timeline Plugin Support

- [ ] Minimap Plugin Support

- [ ] Spectrogram Plugin Support

- [ ] Cursor Plugin Support

- [ ] MediaSession Plugin Support

- [ ] Microphone Plugin Support

## Local Setup

```bash

git clone https://github.com/amilajack/react-wavesurfer.js

cd react-wavesurfer.js

npm install

npm run build

```

## Related

- [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js)

- [react-wavesurfer (Archived)](https://github.com/mspae/react-wavesurfer)

## Credits

Credits go to [mspae](https://github.com/mspae) for starting the [inital work on this](https://github.com/mspae/react-wavesurfer)