Two versions of a playButton Binding Audio With a grid link structure

JavaScript
862 
    function showSpeakerHandler() {
        if (isActive() && isPlaying()) {
            images.showIcon("speaker");
        }
    }

   function showSpeakerHandler() {
        if (isPlaying()) {
            images.showIcon("speaker");
        }
    }
863

You are screwing things up again.

Go back to the code in https://jsfiddle.net/cubphcqd/58/

It is the condition of the if statement in that code that needs to be updated.

864
865

We were working on the code at https://jsfiddle.net/cubphcqd/58/ and should continue working on that code until it is working as desired.

866

I will not be working on other code until this current tiny feature that you require on https://jsfiddle.net/cubphcqd/58/ has been achieved.

2 Likes
867

(isActive() && isPlaying())

Was in reference to what?

868

That is what’s required for the code at https://jsfiddle.net/cubphcqd/58/ to not play when you first click on it.

869

I thought we weren’t using isPlaying?

870

Yes we are.

The isPlaying() function is how the code tells if the audio player is playing. That’s how it knows whether to show the play or pause button.

871

When the player shows the fancy image and it isn’t showing the play or pause button, it’s not active.
When the image is gone and the play or pause button is being shown, the player is active.

Currently though the if condition at https://jsfiddle.net/cubphcqd/58/ uses player.paused so we don’t need to be concerned with isPlaying yet.

872

Currently when the button isn’t active, you don’t want it to start playing. Is that right?

873

When it’s first viewed, audio off.

You have to click on it to turn it on.

874

That’s right. So only when it’s active (which the code after the if statement achieves) and when the audio is paused, will it start playing.

To achieve that, the condition of the if statement needs to be updated.

Currently the condition is (player.paused) which needs to be updated to (isActive() && player.paused)

875
876

You are missing the isActive function.

We’ll keep it nice and simple first, while we get the code working.
Then we will change isActive so that is looks for the right thing.

Create the isActive function above the togglePlayButton function, in the same way that you did so before.

877

You moved button back up:

     button.classList.add("playing");
     hide(button.querySelector(".initial"));
     link.classList.remove("inactive");
878

I didn’t move it.

That needs to be down below the end if the if/else block of code.

879
880

Inside of that isActive function, return true.

That will do temporarily while we check that the code still works. When it’s confirmed as working, progress can continue from there.

881 
  function isActive(button) {
   return true;
   
   }