Vanilla JS Music Player
The Project consist of a Music Container. Inside it, there are: Music Info, Track Cover image, and navigation controls.
The Script consist of 3 files:
- Script.js it contains the constant values initiallization will be passed to the DOM. The File also consist of a Load function and an event listener that passes a boolean value on whether the PLAY button is clicked or not.
- Controls.js IT contains 4 main functions:
1) playSong: Which is responsible for PLAYING the Music by adding the PLAY class item to the container class.
2) pauseSong: Which is responsible for PAUSING the music by removing the PLAY class item from the container class.
3) prevSong: Which is responsible for playing the PREVIOUS track by comparing the song index with songs array length.
4) nextSong: Which is responsible for playing the NEXT track by comparing the song index with songs array length.
- progress.js It contains of 2 functions: 1) updateProgress and 2) setProgress, along with 3 event listeners that Display the music timeline, allows changing the track timeline by click, and jump to the next music track when the song is over.
As for the Style, almost all controls are covered along with some animation effects for the buttons and the progress timeline animation.
The Code Implementation can be found here [https://codepen.io/abbbas_alhashimi/pen/JjNOzyp].