I added in a speaker and now it won't pause

asasass · October 16, 2018, 7:54pm

I looked at how my other players are set up but I can’t figure it out.

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  function hideAllButtons(button) {
    var buttonSelectors = ".play, .pause, .speaker";
    button.querySelectorAll(buttonSelectors).forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".play");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }

  function getSpeaker(button) {
    return button.querySelector(".speaker");
  }

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("active");
  }

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hide");
  }

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButton");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }

  function showPauseButton(button) {
    var pause = getPause(button);
    hideAllButtons(button);
    show(pause);
    button.classList.add("activated");
  }

  function showSpeakerButton(button) {
    var speaker = getSpeaker(button);
    hideAllButtons(button);
    show(speaker);
  }


  function getAudio() {
    return document.querySelector("audio");
  }

  function playAudio(player, src) {
    player.volume = 1.0;
    if (player.getAttribute("src") !== src) {
      player.setAttribute("src", src);
    }
    player.play();
  }

  function showButton(button, opts) {
    if (opts.playing) {
      showPlayButton(button);
    } else {
      showPauseButton(button);
    }
  }

  function pauseAudio(player) {
    player.pause();
  }

  function manageAudio(player, opts) {
    if (opts.playing) {
      pauseAudio(player);
    } else {
      playAudio(player, opts.src);
    }
  }

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

  function showPause(button) {
    if (isPlaying(button)) {
      showPauseButton(button);
    }
  }

  function showSpeaker(button) {
    if (isPlaying(button)) {
      showSpeakerButton(button);
    }
  }

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    playButton(button);
  }

  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wrapc");
}());

asasass · October 16, 2018, 8:43pm

This will help answer the first question:

How would this code be written with initial removed from the code?


(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  function hideAllButtons(button) {
    var buttonSelectors = ".play, .pause, .initial, .speaker";
    button.querySelectorAll(buttonSelectors).forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".play ");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }

  function getSpeaker(button) {
    return button.querySelector(".speaker");
  }

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("active");
  }

  function hideInitialOverlay(button) {
    hide(button.querySelector(".initial"));
    showPlayButton(button);
  }

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hide");
  }

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButton");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }

  function showPauseButton(button) {
    var pause = getPause(button);
    pauseAllButtons();
    hideAllButtons(button);
    show(pause);
    button.classList.add("activated");
  }

  function showSpeakerButton(button) {
    var speaker = getSpeaker(button);
    hideAllButtons(button);
    show(speaker);
  }

  function getAudio() {
    return document.querySelector("audio");
  }

  function playAudio(player, src) {
    player.volume = 1.0;
    if (player.getAttribute("src") !== src) {
      player.setAttribute("src", src);
    }
    player.play();
  }

  function showButton(button, opts) {
    if (opts.playing) {
      showPlayButton(button);
    } else {
      showPauseButton(button);
    }
  }

  function pauseAudio(player) {
    player.pause();
  }

  function manageAudio(player, opts) {
    if (opts.playing) {
      pauseAudio(player);
    } else {
      playAudio(player, opts.src);
    }
  }

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

  function showPause(button) {
    if (isPlaying(button)) {
      showPauseButton(button);
    }
  }

  function showSpeaker(button) {
    if (isPlaying(button)) {
      showSpeakerButton(button);
    }
  }

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    playButton(button);
  }

  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wrapb");
}());

asasass · October 16, 2018, 8:45pm

I tried removing just this, but something else would need to be done too.


  function hideInitialOverlay(button) {
    hide(button.querySelector(".initial"));
    showPlayButton(button);
  }

 hideInitialOverlay(button);

I think I would need to restructure this part:

I would most likely rename this function to hideOverlay(button)

  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

I did this but now it’s not playing music:


  function OverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", OverlayClickHandler);
  }
  initButton(".wrapb");
}());

asasass · October 16, 2018, 9:15pm

It’s working here: just no sound:

All the clicking stuff works.

I’m probably forgetting to do something.

 function OverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.removeEventListener("click", OverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", OverlayClickHandler);
  }
  initButton(".wrapb");
}());

asasass · October 16, 2018, 9:27pm

I just tried this:


  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.removeEventListener("click", playButtonClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButton(button);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapb");
}());

asasass · October 16, 2018, 9:38pm

I tried doing it like this:

function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButton(button);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapb");
}());

asasass · October 16, 2018, 9:47pm

This whole function gets removed because it’s not being used after I removed

 function OverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
  }

After I removed this:

Right?

  function hideInitialOverlay(button) {
    hide(button.querySelector(".initial"));
    showPlayButton(button);
  }

 hideInitialOverlay(button);

asasass · October 16, 2018, 9:51pm

If there’s supposed to be 4 functions, and not 3, then I would be working with this:


  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    playButton(button);
  }

  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  function OverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.removeEventListener("click", OverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", OverlayClickHandler);
  }
  initButton(".wrapb");
}());

asasass · October 16, 2018, 9:53pm

I would remove this line because it’s not being used:
button.removeEventListener("click", OverlayClickHandler);

There’s still no sound playing.

asasass · October 16, 2018, 10:03pm

Which way is correct? @Paul_Wilkins

I removed this from it:

  function hideInitialOverlay(button) {
    hide(button.querySelector(".initial"));
    showPlayButton(button);
  }

 hideInitialOverlay(button);

This should now only have 3 functions, not 4 then, right?

Or should there still be 4?

3 functions not counting the last one:

  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButton(button);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapb");
}());

4 Functions not counting the last one.



  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    playButton(button);
  }

  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  function OverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.removeEventListener("click", OverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", OverlayClickHandler);
  }
  initButton(".wrapb");
}());

asasass · October 17, 2018, 2:18am

I think I remember why we set it up like this:

The last function here, that was meant to house all the addEventListener stuff. To keep it separate.

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    playButton(button);
  }

  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

asasass · October 17, 2018, 2:23am

If that one is good, then this one should be working, but it’s not:

asasass · October 17, 2018, 3:59am

Wouldn’t it make more sense for it to be set up like this though?


  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButton(button);
  }

And only this way if I was using the initial button?


  function hideInitialOverlay(button) {
    hide(button.querySelector(".initial"));
    showPlayButton(button);
  }

 hideInitialOverlay(button);

Which would be set up this way


  function OverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    hideInitialOverlay(button);
    button.removeEventListener("click", OverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

asasass · October 17, 2018, 2:07pm

The reason why there would be 3 functions is because

There’s no reason to be using initialOverlayClickHandler function if I’m not using these:

    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);

  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }

In other words, the playButtonClickHandler doesn’t belong inside the initialOverlayClickHandler function if it’s not accompanied by these:

    hideInitialOverlay(button);
    button.removeEventListener("click", initialOverlayClickHandler);

And therefore those 3 addEventListener’s get put into its parent function.

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButton(button);
  }

If i’m not right about something here please tell me.

asasass · October 17, 2018, 2:28pm

When I click on this one it should be saying:
pause hide, not play hide.

 function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("active");
  }


    function showPauseButton(button) {
    var pause = getPause(button);
    hideAllButtons(button);
    show(pause);
    button.classList.add("activated");
  }


    function showSpeakerButton(button) {
    var speaker = getSpeaker(button);
    hideAllButtons(button);
    show(speaker);
  }

This would be an older code of how it worked:

asasass · October 17, 2018, 3:07pm

Here’s it working without the init Button


  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    playButton(button);
  }

  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  var playButtons = document.querySelectorAll(".playButton");
  playButtons.forEach(function(button) {
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
  });
}());

asasass · October 17, 2018, 3:15pm

Is this how I would add the init buttom?



  function initialOverlayClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
    playButtonClickHandler(evt);
  }


  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.addEventListener("click", initialOverlayClickHandler);
  }
  initButton(".wrapc");
}());

asasass · October 17, 2018, 7:29pm

I don’t want to keep adding to this thread because there is so much on it already. But to get back to what the topic was meant to be about.

This is the last working version of the code with the added in speaker.

Older Outdated Code

This one needs to be fixed after I added in a speaker:
I added it in, it’s working, but not how it should.

Working on this newer code.

After you click on one, the one before it should go back to the play button and not stay on speaker.

In the image you can see 3 speakers showing, there should only be 1, and the other 2 should have play showing.

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  function hideAllButtons(button) {
    button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".play");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }

  function getSpeaker(button) {
    return button.querySelector(".speaker");
  }

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("active");
  }

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hide");
  }

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".playButton");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }

  function showPauseButton(button) {
    var pause = getPause(button);
    hideAllButtons(button);
    show(pause);
    button.classList.add("activated");
  }

  function showSpeakerButton(button) {
    var speaker = getSpeaker(button);
    hideAllButtons(button);
    show(speaker);
  }


  function getAudio() {
    return document.querySelector("audio");
  }

  function playAudio(player, src) {
    player.volume = 1.0;
    if (player.getAttribute("src") !== src) {
      player.setAttribute("src", src);
    }
    player.play();
  }

  function showButton(button, opts) {
    if (opts.playing) {
      showPlayButton(button);
    } else {
      showPauseButton(button);
    }
  }

  function pauseAudio(player) {
    player.pause();
  }

  function manageAudio(player, opts) {
    if (opts.playing) {
      pauseAudio(player);
    } else {
      playAudio(player, opts.src);
    }
  }

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

  function showPause(button) {
    if (isPlaying(button)) {
      showPauseButton(button);
    }
  }

  function showSpeaker(button) {
    if (isPlaying(button)) {
      showSpeakerButton(button);
    }
  }

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    playButton(button);
  }

  function playButtonMouseoverHandler(evt) {
    var button = getButtonContainer(evt.target);
    showPause(button);
  }

  function playButtonMouseoutHandler(evt) {
    var button = getButtonContainer(evt.target);
    showSpeaker(button);
  }

  var playButtons = document.querySelectorAll(".wrapc");
  playButtons.forEach(function(button) {
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
  });
}());

Update:
Solved using Diff Checker
https://www.diffchecker.com/diff

I was missing:
pauseAllButtons();
https://jsfiddle.net/5mnwLsj8/71/

https://i.imgur.com/xO6ztwX.png

system · January 17, 2019, 2:29am

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