Happy Monday! I spent most of my weekend fishing in Final Fantasy XIV for my relic tool. Which I finally received. Now I’m working on getting my culinarian her relic tool. I’ve been collecting Moogle tomes, too, but I still need to collect my rewards. I need to do that before the event ends in March.
We dropped Alex and Jay off to some party on Saturday, and Tom and I went to Starbucks for a few hours. I enjoy coffee shops. Not precisely the coffee prices, but relaxing with my laptop is excellent. Then we went to the car wash to bathe the Outback. She was pretty dusty.
Today went fast. I worked on the computer for most of the day. I was going to take apart my computer last weekend and dust it. Damn! I will remember that for this coming weekend. Alex is playing a game on the TV. I can feel the bass.
The book I’m reading, Under One Roof, is boring. I can predict what will happen at the end of the book. The whole story is unbelievable. And I don’t need to hear how tall and broad this guy is anymore. I like the author, but there are better books by her than this one. The next book in my library hold is Weyward. Weyward is a story about an accused witch, a young woman forced to conform to her father’s rules, and a modern-day wife on the run from an abusive partner. The story is a historical fiction. It got some pretty good hype, so I’m hoping Weyward will live up to this hype. I’m also hoping this book won’t be a big trigger for me.
I should finish up some studying. Till next time…
JavaScript notes…
——————————————–
Music player: Steps 31 – 50
Step 31
You need to update the current song being played as well as the appearance of the playButton element.
Start by accessing the userData object and its currentSong property. Set its value equal to the song variable.
Note: You should not use the optional chaining operator ?. in this step because userData.currentSong will not be null or undefined at this point.
userData.currentSong = song;
Step 32
Next, use the classList property and the add() method to add the playing class to the playButton element. This will look for the class playing in the CSS file and add it to the playButton element.
To finally play the song, use the play() method on the audio variable. play() is a method from the web audio API for playing an mp3 file.
playButton.classList.add('playing');
audio.play();
Step 33
In previous steps you built out the functionality for playing a song. Now you need to add the functionality to the play button so that it will play the current song when it is clicked on.
Use the addEventListener() method and pass in a click event for the first argument and an empty callback function with arrow syntax for the second argument, e.g., () => {}.
playButton.addEventListener('click', () => {
})
Step 34
Within the arrow function of the event listener, add an if to check if userData?.currentSong is null.
Inside the if block, call the playSong() function with the id of the first song in the userData?.songs array. This will ensure the first song in the playlist is played first.
if (userData?.currentSong === null) {
playSong(userData?.songs[0].id);
}
Step 35
Add an else block. Inside the else block, call the playSong function with the id of the currently playing song as an argument.
This ensures that the currently playing song will continue to play when the play button is clicked.
if (userData?.currentSong === null) {
playSong(userData?.songs[0].id);
} else {
playSong(userData?.currentSong.id)
}
Step 36
To play the song anytime the user clicks on it, add an onclick attribute to the first button element. Inside the onclick, call the playSong function with song.id.
Don’t forget you need to interpolate with the dollar sign here.
Step 37
Now you need to work on pausing the currently playing song.
Define a pauseSong function using the const keyword and arrow function syntax. The function should take no parameters.
const pauseSong = () => {
}
Step 38
To store the current time of the song when it is paused, set the songCurrentTime of the userData object to the currentTime of the audio variable.
Note: You should not use optional chaining for this step because userData.songCurrentTime will not be null or undefined at this point.
const pauseSong = () => {
userData.songCurrentTime = audio.currentTime;
};
Step 39
Use classList and remove() method to remove the .playing class from the playButton, since the song will be paused at this point.
To finally pause the song, use the pause() method on the audio variable. pause() is a method of the Web Audio API for pausing music files.
const pauseSong = () => {
userData.songCurrentTime = audio.currentTime;
playButton.classList.remove('playing');
audio.pause();
};
Step 40
You need to hook up the pauseSong function to an event listener to make it work.
Add a click event listener to the pauseButton element, then pass in pauseSong as the second argument of the event listener. This is the function the event listener will run.
pauseButton.addEventListener('click', pauseSong);
Step 41
Before you start working on playing the next and previous song, you need to get the index of each song in the songs property of userData.
Start by creating an arrow function called getCurrentSongIndex.
const getCurrentSongIndex = () => {
}
Step 42
To get the index for the current song, you can use the indexOf() method. The indexOf() array method returns the first index at which a given element can be found in the array, or -1 if the element is not present.
const animals = [“dog”, “cat”, “horse”];
animals.indexOf(“cat”) // 1
Inside your getCurrentSongIndex function, return userData?.songs.indexOf(). For the indexOf() argument, set it to userData?.currentSong.
const getCurrentSongIndex = () => {
return userData?.songs.indexOf(userData?.currentSong);
}
Step 43
You need to work on playing the next song and the previous song. For this, you will need a playNextSong and playPreviousSong function.
Use const and arrow syntax to create an empty playNextSong function.
const playNextSong = () => {
}
Step 44
Inside the playNextSong function, create an if statement to check if the currentSong of userData is strictly equal to null. This will check if there’s no current song playing in the userData object.
If the condition is true, call the playSong function with the id of the first song in the userData?.songs array as an argument.
const playNextSong = () => {
if (userData?.currentSong === null) {
playSong(userData?.songs[0].id);
}
}
Step 45
Add an else block to the if statement. Inside the else block, call the getCurrentSongIndex() function and assign it to a constant named currentSongIndex.
if (userData?.currentSong === null) {
playSong(userData?.songs[0].id);
} else {
const currentSongIndex = getCurrentSongIndex();
}
Step 46
Next, you will need to retrieve the next song in the playlist. For that, you will need to get the index of the current song and then add 1 to it.
Create a constant called nextSong and assign userData?.songs[currentSongIndex + 1] to it.
Lastly, call the playSong function and pass in nextSong.id as the argument.
if (userData?.currentSong === null) {
playSong(userData?.songs[0].id);
} else {
const currentSongIndex = getCurrentSongIndex();
const nextSong = userData?.songs[currentSongIndex + 1];
playSong(nextSong.id);
}
Step 47
It’s time to hook up the playNextSong function to an event listener.
Add a click event listener to the nextButton element, then pass in playNextSong as the second argument of your event listener. This is the function the event listener will run.
nextButton.addEventListener("click", playNextSong);
Step 48
Use const and arrow syntax to create an empty playPreviousSong function.
const playPreviousSong = () => {
}
Step 49
Within the playPreviousSong function, add an if statement with a condition of userData?.currentSong === null. This will check if there is currently no song playing. If there isn’t any, exit the function using a return.
Inside the else block, create a constant named currentSongIndex and assign it getCurrentSongIndex().
const playPreviousSong = () => {
if (userData?.currentSong === null) {
return
} else {
const currentSongIndex = getCurrentSongIndex();
}
};
Step 50
To get the previous song, subtract 1 from the currentSongIndex of userData?.songs and assign it to the constant previousSong. After that, call the playSong function and pass previousSong.id as an argument.
if (userData?.currentSong === null) return;
else {
const currentSongIndex = getCurrentSongIndex();
const previousSong = userData?.songs[currentSongIndex -1];
playSong(previousSong.id);
}
