Music Player with Javascript

 

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 name and artist name.

Audio track links from folder.img/

The three DOM grabbed from objects with Javscript event.

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

Play controls are three icons from fontawesome.

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 calculate with audio playing time percentage.

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

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

Because fas is icon , it's neccessory to do not selected by user.

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

JAVASCRIPT:

Select all needed DOM at the beginning of js file.

Music array info.

If the music is playing,change the icon ,title and function,likewise.

When click the play button, run function according to the bollean of isPlaying.

LoadSong is the main function links to audio info.

When click the prev or next button,it should run different function which change the index of current song.

The progress display is based on the percentage of current playing time and duration time.

Left number is the current time.

Right number is the total duration time.

The bar indicates music progressing.

Call all the event listener at the end.