Music Player with Javascript

Course from Brad Traversy

Features:

audio play() pause() currentTime duration timeupdate ended

e.target e.clentWidth e.offsetX

HTML

link the font awesome in the head part for the audio play buttons

music-info includes a song title and the progress bar

audio embedded

the cover image positions at the left side

the navigation is three control buttons

CSS

The cover image has a white circle inside for good looking.

the cover image will rotate 360 degrees when the music is playing.

animation-play-state:running/paused more info MDN

music-info hide behind the container first and transform up entirely, and also the opacity from 0 to 1

changing the progress width every millisecond

select all the DOM needed

all the songs name stored in the songs array, and the index init set to a number

When loading the page, load the song

showing the song title, image, and the audio source

when click the play button, checking if the music is playing based on the classname"play"

if the audio is playing, pause the song. if the song is paused, play the song

playSong(): add the play class to the music container and change the icon of controls. play() audio

pauseSong(): remove the class to the music container and change the icon of controls. pause() audio

previous and next buttons event

prevSong(): change the index of song. when the index is smaller than 0, jump to the last one.

nextSong():change the index of song. when the index is bigger than the length of songs list,jump to the first one.

timeupdate , the progress bar change based on the time played

click the progress bar to change the audio playing position

e.srcElement to get the duration and currentTime

get the playing percentage of progress and set the width of progress

the length of progress is the e.clientWidth.the click point is the e.offset X. set the audio currentTime

when the song play ended, go to next song

CodemySite_Web development