SynthWave

• 

  Light Mode

• 

  Music Player

• 

  Playlist

• 

  Adding Custom Songs

• 

  Deletion of song

Inspiration

I wanted to build something simple yet useful with only HTML, CSS, and JavaScript. Music connects everyone, and a music player felt like a good project to learn about interactivity and design.

What it does

Plays, pauses, and switches between songs

Shows song title, artist, and cover image

Displays a progress bar with current and total time

Works smoothly on mobile, tablet, and desktop

Uses clean design and animations to make it engaging

How we built it

HTML for the structure

CSS for styling and responsive design

JavaScript for all the controls and dynamic updates

Challenges we ran into

Syncing the progress bar with the actual song time

Making the design responsive for all screens

Updating song details dynamically without breaking the flow

Accomplishments that we're proud of

Built a fully working music player without frameworks

Made it responsive and simple to use

Learned how to handle audio controls with JavaScript

What we learned

DOM manipulation in JavaScript

Building responsive layouts with CSS

Designing interactive UI with minimal code

What's next for SynthWave

Add playlists and shuffle option

Add volume control

Add dark and light themes

Make it installable as a web app

Built With

• html