Getting the audio to start after the image is clicked

JavaScript
1

The audio starts after the image is clicked here:

playButtonClickHandler(evt);

How would I do that with this code?

Where would this go?
playButtonClickHandler(evt);

or would it be set up differently?

2

The main idea here is to make accessible parts of the code that you want to access.

Give the first iife a meaningful name, such as cover, and the second iife a name of player
That helps us to make better sense of them. As you’re wanting the cover code to trigger the playing, the cover code needs to know about the player code. To achieve that, move the cover code down below the player code.

Then for the cover code to access the player code we need to assign the player code to a variable name, so we can assign it to a player variable instead.

// (function player() {
const player = (function makePlayer() {

It is I think the togglePlayButton() function that needs to be accessed from outside of the player code, so return a reference to that togglePlayButton function from the end of the player code:

  return {
    toggle: togglePlayButton
  };
}());

And you can then toggle the player from the cover code:

    hide(cover);
    show(thewrap);
    player.toggle(thewrap);
1 Like
5

1.)
I’m getting this error on both codes:

Redefinition of 'player' from line 0.

 const player = getAudio();


    function togglePlayButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }

2.)
How come the audio isn’t turning on?

It changes from play to pause, but there is no audio coming out after the image is clicked.

    return {
        toggle: togglePlayButton
    };
}());

But it works fine on this one:

    return {
        toggle: playButton
    };
}());

What’s the difference, and why does it work in one, but not the other?

What would need to be fixed in the first one?

6

Good catch - togglePlayButton was my mistake, and playButton is the correct one to use.

8

My above post is incorrect I just noticed now. I posted the wrong jsfiddle link on one of them.

1.)
After you click on the image, no audio is playing.

Fixed jsfiddle link:

    return {
        toggle: togglePlayButton
    };
}());

2.)
Different code: The audio works fine here.

    return {
        toggle: playButton
    };
}());

Changing togglePlayButton to playButton doesn’t make a difference in the 1st code.

How would that one be fixed?.

9

The only useful information that we have from the outside is the wrap element. It’s not appropriate for us to go digging in through the HTML element code for the actual button, as the player code is already supposed to do that for us instead.

Instead of exposing the toggle method, it makes better sense to expose the button itself.
That way we can just click the button to toggle it.

      return {
          // toggle: togglePlayButton
          button: document.querySelector(".playbutton")
      };
...
          // player.toggle(thewrap);
          player.button.click();

We can then tidy things up by removing the document button parts and instead making them local to the wrapper itself.

      "use strict";
      let wrapper;
      ...
      function pauseAllButtons() {
          // const buttons = document.querySelectorAll(".playButton");
          const buttons = wrapper.querySelectorAll(".playButton");
      ...
      function initButton(selector) {
          // const wrapper = document.querySelector(selector);
          wrapper = document.querySelector(selector);
          ...
      }
      initButton(".wrape");
      return {
          // button: document.querySelector(".playButton")
          button: wrapper.querySelector(".playButton")
      };
1 Like
10

How does this get fixed?

Redefinition of ‘player’ from line 0.
const player = getAudio();

In Here:

    function togglePlayButton(button) {
        const player = getAudio();
        const playing = isPlaying(button);
        showButton(button, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }
11

You can call it audio instead.

1 Like
12

Done:

    function togglePlayButton(button) {
        const audio = getAudio();
        const playing = isPlaying(button);
        showButton(audio, {
            playing
        });
        manageAudio(player, {
            src: button.getAttribute("data-audio"),
            playing
        });
    }
13

No, don’t rename the showButton code from button to audio.
It’s manageAudio that needs to have player renamed to audio instead.

14

Here:

This becomes audio:
const audio = getAudio();

And this becomes audio:
manageAudio(audio, {

Right?

      function togglePlayButton(button) {
          const audio = getAudio();
          const playing = isPlaying(button);
          showButton(button, {
              playing
          });
          manageAudio(audio, {
              src: button.getAttribute("data-audio"),
              playing
          });
      }
1 Like
15

The reason why this worked on the other code was because it was all connected:
<div class="playButton wrapb hide"

    return {
        toggle: playButton
    };

player.toggle(thewrap);

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.