If I pause it, then start, the song goes back to the beginning.
I’ll come back to this after I finish the longer post that I’m in the middle of creating.
You can see what I’m talking about here:
Play, then pause it, then play it again, it starts over from the beginning.
How do I fix that?
It doesn’t do that here:
It doesn’t reset after you pause it.
onclick="document.getElementById('player').pause()">Pause</button>
I’ll come back to this after I finish the longer post that I’m in the middle of creating.
1 Like
I saw that.
Code E has some differences worth exploring.
Code E uses upTo instead of getButtonContainer
function playButtonClickHandler(evt) {
var button = upTo(evt.target, ".wrape .playButton");
togglePlayButton(button);
}
Code E is the odd-one-out with no good reason to use upTo.
Using console.log() to check that the container and the button, lets me confirm that they both give the same results:
function playButtonClickHandler(evt) {
var container = getButtonContainer(evt.target);
var button = upTo(evt.target, ".wrape .playButton");
console.log(container, button);
togglePlayButton(button);
}
So, the getButtonContainer() method can be used in Code E instead of upTo:
function playButtonClickHandler(evt) {
var button = getButtonContainer(evt.target);
togglePlayButton(button);
}
The next difference shows that the hideInitialOverlay() function is just in a different place, so moving it back in to place is easily done.
After that though, the next difference shows that the hideinitialOverlay() functions are different which isn’t going to be so easy to deal with.
Button B hides the cover class and shows the play button, whereas Button E also hides inactive and adds active.
We can easily combine the two functions, making sure to use button instead of wrapper, and because in some cases the playButton is on the wrapper, and in others the playButton is inside of the wrapper, we need to check if the playButton was found and if it wasn’t, use the wrapper instead.
var button = wrapper.querySelector(".playButton") || wrapper;
With that, we have a good consistant hideInitialOverlay() function that works everywhere.
function hideInitialOverlay(wrapper) {
var button = wrapper.querySelector(".playButton") || wrapper;
wrapper.classList.remove("inactive");
wrapper.classList.add("active");
hide(wrapper.querySelector(".cover"));
showPlayButton(button);
}
That leaves us with the following code, https://jsfiddle.net/v1gfjnm9/244/ and the rest of the conversion can occur from here.
1 Like
Have the playAudio() function check if the src needs to be updated.
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
Do you want me to carry on with the rest of the code conversion?
1 Like
On how to fix this, yes.
please.
That works, now I’m learning what an operator means. !==
What’s the difference between != and !==
They both work.
Why one, and not the other?
How do you know which to use?
!=
!==
The != is a loose difference, similar to how == is a loose comparison.
Always use !== and you’ll never end up making the wrong comparison.
1 Like
I read this:
!= checks the value
!== checks the value and type
You know how == has the following comparison chart? And that with === it’s much easier to get expected results?
The same situation occurs with != and !==
1 Like
It’s easier to understand when one way works, and the other way doesn’t.
But when both work, then it becomes confusing.
The == and != are what JavaScript started with, and have only remained because it would break code to remove them.
The === and !== were added to fix problems with the original ones. Stay with the fixed ones.
2 Likes
Now what’s the issue?
Click on the 1st player then the 2nd player then third player.
The first and second player use the same audio source, so the pause/play when clicking back and forth on them results in virtually no pause at all.
How would I fix that?
Use different audio sources for them.
What exactly do you mean by that?