- 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
/editroute is used to edit the audio waveform
- The
- 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
- Fork and clone this repo using
git clone https://github.com/Rajatm544/react-audio-editor.git npm installall dependenciesnpm startto run the react app locally- Refer the wavesurfer.js docs to add new features!
- Push all the code to this repo
- Create a new site on Netlify, choose the correct repository
- Set the
Build commandto beCI= npm run build - Set the
Publish directoryoption to be/build - Choose a unique site name
- Start deployment
- 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.