rajatm544/react-audio-editor

An audio editor app built using React.js and wavesurfer.js

Audio Editor

• An app to visualise audio files as waveforms, and to edit it in the browser!
• The app is built using React.js(CRA) and wavesurfer.js
• There are 2 routes in the app:
  • The / route is used to upload the audio file
  • The /edit route is used to edit the audio waveform
• The varios controls included are as follows:
  • play/pause
  • replay
  • trimming a particular section of the audio waveform
  • zooming in/out using a slider
  • volume level
  • toggle switch
• The app is deployed to Netlify using continuous integration from the Github repo

Steps to get started

• Fork and clone this repo using git clone https://github.com/Rajatm544/react-audio-editor.git
• npm install all dependencies
• npm start to run the react app locally
• Refer the wavesurfer.js docs to add new features!

Deployment steps

• Push all the code to this repo
• Create a new site on Netlify, choose the correct repository
• Set the Build command to be CI= npm run build
• Set the Publish directoryoption to be /build
• Choose a unique site name
• Start deployment

Tools used for this project

• React.js: A popular JS library for building user interfaces
• wavesurfer.js: A customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas.
• Materialize CSS: A modern frontend framework, here it is used for the icons
• Netlify: A platform to deploy web projects with easy-to-use CI tools.

react-audio-editor's Issues

Some Feature Request

• After trimming the audio we cannot export it in your web app.
• There is no option to manually type the start and end trim time

Error when try to trim the specific region

Hello.
First of all, thank you very much for contributing to this source code.
This is very useful example how to implement wavesurfer.js on React.js.
But while trying to trim, I face some errors.

Can you please take a look and what the solution is?

Sincerely,