I changed it to audio, so that’s correct then.
What else needs to be adjusted in here?
document.querySelector(".myLink").classList.add("hide");
function playButtonClickHandler() {
document.querySelector(".myLink").classList.remove("hide");
var button = document.querySelector(".playButton");
var player = playButton.querySelector("audio");
playButton.querySelector(".initial").classList.add("hide");
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
playButton.querySelector(".play").classList.add("hide");
playButton.querySelector(".pause").classList.remove("hide");
player.play();
} else {
playButton.querySelector(".play").classList.remove("hide");
playButton.querySelector(".pause").classList.add("hide");
player.pause();
}
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());
.myLink Should only be once or twice?
or should it be set up differently?
document.querySelector(".myLink").classList.add("hide");
function playButtonClickHandler() {
document.querySelector(".myLink").classList.remove("hide");
This what I have so far.
Before moving on to other adjustments, first test that things still continue to work.
The playbutton doesn’t appear now.
it’s hidden.
The audio change is not relevant to that problem. You have been failing to check that things work after making changes, which has resulted in your current failure.
Which one do you want to work on first? The play button, or the audio?
The part the needs to be adjusted in here.
document.querySelector(".myLink").classList.add("hide");
function playButtonClickHandler() {
document.querySelector(".myLink").classList.remove("hide");
var button = document.querySelector(".playButton");
var player = playButton.querySelector("audio");
playButton.querySelector(".initial").classList.add("hide");
player.volume = 1.0;
if (player.paused) {
button.classList.add("playing");
playButton.querySelector(".play").classList.add("hide");
playButton.querySelector(".pause").classList.remove("hide");
player.play();
} else {
playButton.querySelector(".play").classList.remove("hide");
playButton.querySelector(".pause").classList.add("hide");
player.pause();
}
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());
You haven’t answered my question.
Which problem do you want to work on first? Do you want to first fix the play button, or fix the audio?
play button
Which ever should be worked on first, before you get to the other.
The order of which one gets worked on first doesn’t matter. They should be worked on one at a time though.
play button
then audio.
Okay, the play button.
Look at the HTML code. Can you find where the play button is in the HTML code?
<div class="playButton">
That’s not the part that shows the play symbol. Do you have one of those? Or, possibly a more effective question, do you have another working example of the code that shows the play button?
<svg class="play hide" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
<path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
It goes straight to the pause button cause it’s hidden on initial.
Here:
Okay then. So the pause button needs to be the focus of our investigation, instead of the play button.
In the non-working code, what is the HTML for the pause button?
<svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
<path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
</svg>
Since you said that the pause button should be showing, can you see why the pause button isn’t showing?