vishal-sony / camb.ai_frontend_assignment

React Audio Pill Player

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.

Features

• 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.

Getting Started

Follow these steps to get the project up and running on your local machine:

Prerequisites

• Node.js installed on your machine.
• npm or yarn package manager.

Installation

1. Clone the repository:

   git clone https://github.com/Vishal-Sony/CAMB.AI_Frontend_Assignment

2. Navigate to the project directory:

   cd CAMB.AI_Frontend_Assignment/CAMB.AI_FE_ASS

3. Install dependencies:

   npm install   # or yarn install

Usage

1. Start the development server:

   npm run dev   # or yarn dev

2. Open your browser and visit http://localhost:3000 to see the React Audio Pill Player in action.

How to Use

1. Adding Audio Files:

   • Click the "Add Audio" button to select and add individual audio files to the timeline.

2. Uploading Audio Files:

   • Use the "Upload" button to dynamically upload audio files to the timeline.

3. Manipulating Tracks:

   • Click and drag audio tracks to shift them around in the timeline.

4. Playback:

   • Play and pause audio playback using the player controls.

Technologies Used

• React
• Vite
• wavesurfer.js

Contributing

Feel free to contribute to this project. Fork the repository, make your changes, and submit a pull request.