If play button clicked, change pp.src to pause button and call ay(). If the Pause button is clicked, the HTML element will run playPause(), the logic in the ELSE statement will be executed, and the playing variable will be true.
If the Play button is clicked, the HTML element will run playPause(), the logic in the IF statement will be executed, and the playing variable will be set to false. We’re creating a variable named playing to help us create a “truthy” and “falsey” state to dictate which logic is run in the playPause() if/else statement. add at the bottom of the tagĪdd the script tag above to your HTML file and let’s start breaking down the functions in the JavaScript file here. Third, we’ll finally add the functionality to let your music player perform the onClick and onChange events written in your HTML file. Box is the container for the Play/Pause, Next, and Previous buttons as well as the audio track information. Container is the bucket that will capture every component of the music player. With the exception of “container” and “box”, each class in the DIV elements above describe the type of data that will appear within the element. Music Player Beyonce Don't Hurt Yourself The bolded items below were added to add structural order via DIV elements and audio track information to our music player. The onchange event is a JavaScript event that invokes the changeProgressBar function when the user drags the music thumb to change the currentTime of the track.įrom a structural standpoint, we’ll need DIV elements to containerize specific parts of the player to make styling and arranging different components easier. The metadata itself contains information about the audio object, such as the currentTime and duration of the track. The progress bar for an audio track essentially is a linear scale that corresponds to the audio’s metadata. Progress Bar (enables ability to change the track position) The onclick event is a JavaScript event that will perform the next- and previousSong() functions when images are clicked. The buttons are images with ID’s that will allow us to change its placement on the page via CSS. The playPause() function will swap the images (play.png -> pause.png) when Play button is clicked. The onclick event is a JavaScript event that will perform the playPause() function when the Play button image is clicked. The button is an image with an ID that will allow us to change its placement on the page via CSS. We will change the album cover via JavaScript later. Īlbum cover The album cover will have an ID of “thumbnail” and we will modify the size and placement of the album cover via CSS. We’ll assign an ID to allow us to change the track via JavaScript. When thinking about the player, the broad components that come to mind are:Īudio track The track can be loaded by providing a path in the src attribute of the Audio tag. First, we’ll need to write out the HTML code that will represent the initial state of our simple music player.
0 kommentar(er)
