Made a ๐ตMusic Player ๐ถ with HTML, CSS and Vanilla Javascript.
๐ The basic features of the Music Player are:
๐น It displays the song's title and artist's name.
๐น It also displays the total song duration,
๐น And updates the current lapsed duration too, as the song is playing.
๐น It allows user to play and pause any song.
๐น It also allows user to jump to a specific time in the song.
๐น The user can use the 'Play All' feature to play all the songs in the list.
๐น There are options to go to the next or the previous song.
๐น The song cover image changes with each song.
๐ What did I learn?
๐น About HTMLAudioElement API and its events.
๐น I created the design for the UI in Figma. I learnt how to create reusable components in Figma.
(If you guys have any resources to learn Figma, please let me know in the comments.)
Live Demo on Github
๐ The basic features of the Music Player are:
๐น It displays the song's title and artist's name.
๐น It also displays the total song duration,
๐น And updates the current lapsed duration too, as the song is playing.
๐น It allows user to play and pause any song.
๐น It also allows user to jump to a specific time in the song.
๐น The user can use the 'Play All' feature to play all the songs in the list.
๐น There are options to go to the next or the previous song.
๐น The song cover image changes with each song.
๐ What did I learn?
๐น About HTMLAudioElement API and its events.
๐น I created the design for the UI in Figma. I learnt how to create reusable components in Figma.
(If you guys have any resources to learn Figma, please let me know in the comments.)
Live Demo on Github