A dynamic audio player for React, inspired by iMovie, that allows users to add, upload, and manipulate audio files on an ever-changing timeline. Built using React and Vite, with the wavesurfer.js library for audio waveform visualization.
- Add individual audio files to the timeline.
- Upload audio files dynamically.
- Shift audio tracks around in the timeline.
- Visualize audio waveforms using wavesurfer.js.
- Play and pause audio playback.
- Responsive design for a seamless user experience.
Follow these steps to get the project up and running on your local machine:
- Node.js installed on your machine.
- npm or yarn package manager.
-
Clone the repository:
git clone https://github.com/Vishal-Sony/CAMB.AI_Frontend_Assignment
-
Navigate to the project directory:
cd CAMB.AI_Frontend_Assignment/CAMB.AI_FE_ASS
-
Install dependencies:
npm install # or yarn install
-
Start the development server:
npm run dev # or yarn dev
-
Open your browser and visit http://localhost:3000 to see the React Audio Pill Player in action.
-
Adding Audio Files:
- Click the "Add Audio" button to select and add individual audio files to the timeline.
-
Uploading Audio Files:
- Use the "Upload" button to dynamically upload audio files to the timeline.
-
Manipulating Tracks:
- Click and drag audio tracks to shift them around in the timeline.
-
Playback:
- Play and pause audio playback using the player controls.
- React
- Vite
- wavesurfer.js
Feel free to contribute to this project. Fork the repository, make your changes, and submit a pull request.