This project is a music player . I wanted to play all my favourite songs without ads and without wasting my mobile's space, so I am trying to make this music player for myself.
I just used : - HTML - CSS - JavaScript - VS CodeCode
- Play/Pause Song
- Next/Previous Song
- Auto-Play Next Song
- When a song finishes, the next song plays automatically.
- Song Display
- Shows album image, song name, and artist for the current song.
- Progress Slider
- Shows the current position of the song.
- Can drag to seek to a different part of the song.
- Dark Theme UI
Theme UI
I haven't added any keyboard features yet. I might add in the future.
- I set up my project files: HTML for structure, CSS for styling, and JavaScript for functionality.
- I created the UI layout: added the music player container, song image, song name, artist, playback buttons (play/pause, next, prev, shuffle, repeat), and a progress slider.
- I added the song data as an array of objects with image, name, artist, and audio for each song.
- I made the player load the song details into the UI when changing songs.
- I implemented play and pause functionality with a dynamic audio element.
- I made the play/pause button icon change depending on whether the music is playing or paused.
- I added next and previous song navigation that updates the song index, UI, and audio source.
- I synced the slider with the song’s current time and made it draggable to seek different parts of the song.
- I added shuffle mode to play random songs and repeat mode to repeat the current song, with button color indicating active state.
- I made the next song auto-play when the current one finishes.
- I polished the UI with a dark theme, glowing slider, and responsive button icons.
- Overall, I turned a static layout into a fully functional, interactive music player.
ic player.
I learned many things in the process of making this project. Mostly, I learned how to :
. Structuring a web project with HTML, CSS, and JavaScript..
. Creating a dynamic UI that updates based on JavaScript data..
. Manipulating the DOM to change images, text, and icons dynamically..
. Controlling audio playback with JavaScript (play, pause, seek, track progress)..
. Implementing next and previous song navigation and managing the current song..
. Using arrays and objects to manage song metadata..
. Syncing a slider with the song’s current time and making it interactive..
. Making UI elements reflect state changes, like changing button icons and colors..
. Polishing a project with CSS: dark theme, slider styling, hover effects, and responsive design..
. Planning and following a step-by-step workflow from a tutorial and adding my own improvements..
. Improving skills in front-end development, DOM manipulation, and interactive UI design..
It needs many more features and there are many ways to improve, especially: - Play/Pause Button - Auto-Play Next Song - Shuffle Mode - Repeat Mode - Next/Prev Buttons - Dark Theme - Slider Functionality - Some keyboard shortcuts like : - Space Play / Pause the current song - Arrow Right → Next song - Arrow Left ← Previous song - Arrow Up ↑ Increase volume - Arrow Down ↓ Decrease volume - S Toggle Shuffle mode - R Toggle Repeat mode - M Mute / Unmute M Mute / Unmute
Preview.mp4
