Getting the audio to start after the image is clicked

JavaScript
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