Music Player with Javascript

YvonneDev
3 min readOct 8, 2020

Feature:

Music Player with Javascript

Local music and album covers

Font awesome icon

Demo

CODE Github

HTML:

image-container shows the album cover.

h2 and h3 are song names and artist names.

Audio track links from folder.img/

The three DOM were grabbed from objects with Javascript events.

And the Progress duration time is calculated according to the length of the audio and current time playing.

Play controls are three icons from font awesome.

CSS:

Font imported from Google Fonts.

And set everything in the center with flex.

Image fit in the img-container.

Progress-container is the white background.

And progress is the animated progress according to the width percentage, which calculates with audio playing time percentage.

Duration-wrapper is the time number of the current time and the duration time.

Controls are three icon buttons. And the play button is the bigger main one.

Because fas are icons, it’s necessary to do not to be selected by the user.

For a responsive screen, the player should be smaller fit in.

JAVASCRIPT:

Select all needed DOM at the beginning of js file.

--

--

YvonneDev

❤️Front-end Web Development self-taught *share what I learned*