Stop all previous players that are not being listened to

JavaScript
1

The first button being used should pause / play, which it already does.

If you click on another button, the one before it should stop, and not pause.

The only button that should pause is the one you’re listening to.

How would this be done?

  (function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const 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 showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
    }

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

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

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

    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 togglePlayButton(button) {
      const player = getAudio();
      const playing = isPlaying(button);
      showButton(button, {
        playing
      });
      manageAudio(player, {
        src: button.getAttribute("data-audio"),
        playing
      });
    }

    function playButtonClickHandler(evt) {
      const button = getButtonContainer(evt.target);
      togglePlayButton(button);
    }

    function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapa");
  }());


  (function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const 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 showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
    }

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

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

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

    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 togglePlayButton(button) {
      const player = getAudio();
      const playing = isPlaying(button);
      showButton(button, {
        playing
      });
      manageAudio(player, {
        src: button.getAttribute("data-audio"),
        playing
      });
    }

    function playButtonClickHandler(evt) {
      const button = getButtonContainer(evt.target);
      togglePlayButton(button);
    }

    function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapb");
  }());
2

That would mean stopping a stream, which is not designed to be stopped.

3

I think it already does this.

After you click off a currently playing button, the one before it, it doesn’t stay at that same exact spot.

It only pauses on the button that’s currently being used.

4

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