https://github.com/rajatm544/react-audio-editor

An audio editor app built using React.js and wavesurfer.js
https://github.com/rajatm544/react-audio-editor

audio-editor audio-visualizer context-api react-router-dom reactjs wavesurfer-js

Last synced: 17 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/rajatm544/react-audio-editor
• Owner: Rajatm544
• License: mit
• Created: 2021-12-02T08:00:30.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-05T16:58:47.000Z (over 3 years ago)
• Last Synced: 2023-03-05T05:12:30.436Z (about 2 years ago)
• Topics: audio-editor, audio-visualizer, context-api, react-router-dom, reactjs, wavesurfer-js
• Language: JavaScript
• Homepage: https://rajat-audio-editor.netlify.app/
• Size: 659 KB
• Stars: 15
• Watchers: 1
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




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](https://wavesurfer-js.org/)

-   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](https://www.netlify.com/) 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 directory`option to be `/build`

-   Choose a unique site name

-   Start deployment

## Tools used for this project

-   [React.js](https://reactjs.org/): A popular JS library for building user interfaces

-   [wavesurfer.js](https://wavesurfer-js.org/): A customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas.

-   [Materialize CSS](https://materializecss.com/): A modern frontend framework, here it is used for the icons

-   [Netlify](https://www.netlify.com/): A platform to deploy web projects with easy-to-use CI tools.