Stop audio instead of pause

Question

Currently it pauses, how would I have the audio stop instead of pause?

That is all I am trying to figure out how to do.

How it works is, you click on the buttons and the audio plays.

In the code, how would I have the audio stop instead of pause?

What would be added or changed in the code?

Difference between pause and stop.

When the audio is stopped, when it goes back on, the audio doesn't start from the spot it was paused from.

https://jsfiddle.net/xrj83h5c/

(function iife() {
    "use strict";

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

    function getPlay(button) {
        return button;
    }

    function showPlayButton(button) {
        button.classList.remove("active");
    }

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

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

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

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

    const playButtons = document.querySelectorAll(".button");
    playButtons.forEach(function addHandler(el) {
        el.addEventListener("click", playButtonClickHandler);
    });
}());

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.wrap {
  position: relative;
  width: 582px;
  height: 717px;
  background: red;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 195px;
  background-color: black;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.playButton.active .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.playButton.active .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.playButton.active .button .shine {
  opacity: 1;
}

.playButton.active .button .shadow {
  opacity: 0;
}

.playButton .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}


.playButton .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.playButton .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.playButton .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.playButton .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.playButton .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.playButton .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.playButton .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }

  80% {
    opacity: 0;
  }
}

<audio></audio>
<div class="outer">
   <div class="tcell">
      <div class="wrap">
         <div class="playButton" style="margin:2px 2px;" data-audio="http://getradio.me/svoefm">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin: 2px 2px 0 196px;" data-audio="https://stream.sunfmua.com:8443/rock">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin: 2px 0 0 390px;" data-audio="http://getradio.me/svoefm">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin:241px 0 0 2px;" data-audio="https://stream.sunfmua.com:8443/rock">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin:241px 0 0 196px;" data-audio="http://getradio.me/svoefm">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin:241px 0 0 196px;" data-audio="https://stream.sunfmua.com:8443/rock">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin:241px 0 0 390px;" data-audio="http://getradio.me/svoefm">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin:480px 2px 0;" data-audio="https://stream.sunfmua.com:8443/rock">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin:480px 2px 0 196px;" data-audio="http://getradio.me/svoefm">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
         <div class="playButton" style="margin:480px 2px 0 390px;" data-audio="https://stream.sunfmua.com:8443/rock">
            <div class="button">
               <div class="light"></div>
               <div class="dots"></div>
               <div class="characters"></div>
               <div class="shine"></div>
               <div class="shadow"></div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

Set the player's currentTime property to 0 in the playAudio function:

(function iife() {
  "use strict";

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

  function getPlay(button) {
    return button;
  }

  function showPlayButton(button) {
    button.classList.remove("active");
  }

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

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

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

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

  const playButtons = document.querySelectorAll(".button");
  playButtons.forEach(function addHandler(el) {
    el.addEventListener("click", playButtonClickHandler);
  });
}());

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.wrap {
  position: relative;
  width: 582px;
  height: 717px;
  background: red;
}

.playButton {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 195px;
  background-color: black;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
}

.playButton.active .button {
  transform: translateZ(20px) rotateX(25deg);
  box-shadow: 0 -10px 20px #ff1818;
}

.playButton.active .button .light {
  animation: flicker 0.2s infinite 0.3s;
}

.playButton.active .button .shine {
  opacity: 1;
}

.playButton.active .button .shadow {
  opacity: 0;
}

.playButton .button {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  transform-origin: center center -20px;
  transform: translateZ(20px) rotateX(-25deg);
  transform-style: preserve-3d;
  background-color: #9b0621;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
  background-repeat: no-repeat;
}

.playButton .button::before {
  content: "";
  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
  background-repeat: no-repeat;
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: rotateX(-90deg);
  position: absolute;
  top: 0;
}

.playButton .button::after {
  content: "";
  background-image: linear-gradient(#650000, #320000);
  width: 100%;
  height: 50px;
  transform-origin: top;
  transform: translateY(50px) rotateX(-90deg);
  position: absolute;
  bottom: 0;
  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
}

.playButton .light {
  opacity: 0;
  animation: light-off 1s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
}

.playButton .dots {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
  background-size: 10px 10px;
}

.playButton .characters {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
  background-repeat: no-repeat;
}

.playButton .shine {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 0.3;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
  background-repeat: no-repeat;
}

.playButton .shadow {
  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
  background-repeat: no-repeat;
}

@keyframes flicker {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes light-off {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}

<audio></audio>
<div class="outer">
  <div class="tcell">
    <div class="wrap">
      <div class="playButton" style="margin:2px 2px;" data-audio="http://getradio.me/svoefm">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin: 2px 2px 0 196px;" data-audio="https://stream.sunfmua.com:8443/rock">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin: 2px 0 0 390px;" data-audio="http://getradio.me/svoefm">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin:241px 0 0 2px;" data-audio="https://stream.sunfmua.com:8443/rock">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin:241px 0 0 196px;" data-audio="http://getradio.me/svoefm">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin:241px 0 0 196px;" data-audio="https://stream.sunfmua.com:8443/rock">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin:241px 0 0 390px;" data-audio="http://getradio.me/svoefm">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin:480px 2px 0;" data-audio="https://stream.sunfmua.com:8443/rock">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin:480px 2px 0 196px;" data-audio="http://getradio.me/svoefm">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
      <div class="playButton" style="margin:480px 2px 0 390px;" data-audio="https://stream.sunfmua.com:8443/rock">
        <div class="button">
          <div class="light"></div>
          <div class="dots"></div>
          <div class="characters"></div>
          <div class="shine"></div>
          <div class="shadow"></div>
        </div>
      </div>
    </div>
  </div>
</div>