audio-player's Introduction

Audio player

This repository contains the source code for the Audio Player challenge proposed by Significa. The project includes an audio player to play songs from the data folder. You can play, pause, skip forward and backward, adjust volume, and view song information.

You can find more details above. ⬇️

Layout Preview

You can find the prototype design, which is based on where

Additionally to the prototype, I added a play icon that you can find in the folder /assets/icons.

Technologies Used

Here you can find the framework/tools, that were chosen to build the solution:

React - used as the main framework to construct the application logic;
Vite - used to create the boilerplate and run the project;
Tailwindcss - used to build the project styles quickly;
Wavesurfer/react - used to create the waveform of each song and manage the sound playback;
TypeScript - used to maintain the application complexity as long as the project grows.

Getting Started

Clone the repository: git clone https://github.com/edupaulos/audio-player.git;
Enter in the project folder: cd audio-player;
Run yarn wizard ✨ -> this will install dependencies and run the project;

Usage

After the wizard command you can only run yarn dev to start the project
Preview in http://localhost:5174/

To be improved

Optimize the wavesurfer implementation;
Add unit test with istanbul and coverage with istanbul
Implement shuffle and repeat;
On music completed change to next one;
Implement a UI volume controller closer to the prototype. This may be easier with a component lib since the tailwind doesn't provide much customization to the input rage.