javascript pause() restarts audio instead of pausing it?

Question

I am coding a (mp3) sample/jingle/sound player button.

The top row has 2 control buttons and a volume slider, pressing the section below will play the sound.

The first control button toggles loop mode on off (this is functioning as expected)

The second control button is supposed to toggle "play/pause" mode.

If play/pause mode is "on" and you press the button a second time (while it is playing) it should pause, the when you press a 3rd time should resume playing but instead currently, it restarts from the begining on second press. Where did I go wrong?

function playsound() {
  var audiox = document.getElementById('playerx');
  audiox.src = "http://glentertainment.keybit.co.uk/audiop2/22%20Air%20Horn%20Single.mp3";
  var playmode = document.getElementById('playpauseorrapidpressonoff').innerText;
  if (playmode != "off") {
    if (audiox.paused) {
      audiox.play()
    } else {
      audiox.pause()
    }
  } else {
    audiox.play();
  }
}

function setvolume() {
  document.getElementById('playerx').volume = document.getElementById('ssvolume').value;
}


function playmodebuttonpressed() {
  onoffcheck = document.getElementById('playpauseorrapidpressonoff').innerText;
  if (onoffcheck != "off") {
    document.getElementById('playpauseorrapidpress').style.backgroundColor = "grey";
    document.getElementById('playpauseorrapidpressonoff').innerText = "off";

  } else {
    document.getElementById('playpauseorrapidpress').style.backgroundColor = "black";
    document.getElementById('playpauseorrapidpressonoff').innerText = "on";
  }
}


function repeatbuttonpressed() {
  onoffcheck = document.getElementById('repeatbuttonpressed').innerText;
  if (onoffcheck != "off") {
    document.getElementById('loop').style.backgroundColor = "grey";
    document.getElementById('repeatbuttonpressed').innerText = "off";
    document.getElementById('playerx').loop = false;
  } else {
    document.getElementById('loop').style.backgroundColor = "black";
    document.getElementById('repeatbuttonpressed').innerText = "on";
    document.getElementById('playerx').loop = true;
  }
}

.ssvolume {
  transform: scale(0.8);
  width: 60px;
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.singlesoundcontainer {
  width: 100px;
  height: 100px;
  box-shadow: inset 0px 1px 0px 0px #a4e271;
  background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
  background-color: #89c403;
  border: 1px solid #74b807;
  border-radius: 5px;
  display: block;
  position: relative;
}

.singlesamplercontrols {
  width: 100px;
  height: 20px;
  background-color: transparent;
  border-radius: 5px 5px 0 0;
  border: 0.1px solid black;
}

.ssrepeatbutton {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: -4px;
  padding: 0px;
  background-color: grey;
  display: inline-block;
  width: 20px;
  cursor: pointer;
}

.ssrepeatbutton:hover {
  background-color: black;
}

.singlesamplertrigger {
  width: 90px;
  height: 69px;
  cursor: pointer;
  padding: 5px;
  color: black;
  border-radius: 0 0 5px 5px;
  display: inline-block;
  overflow: hidden;
  background-color: transparent;
  font-family: Arial;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0px 1px 0px #528009;
  font-size: 11.5px;
  line-height: 10px;
  border-bottom: 0.1px solid black;
  border-left: 0.1px solid black;
  border-right: 0.1px solid black;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */

}

<div class="singlesoundcontainer">
  <div class="singlesamplercontrols">
    <img class="ssrepeatbutton" id="loop" onClick="repeatbuttonpressed();" src="https://www.bossdj.net/sampledeck/images/repeat-icon.png">
    <span id="repeatbuttonpressed" style="display:none;">off</span>
    <img class="ssrepeatbutton" id="playpauseorrapidpress" onClick="playmodebuttonpressed();" src="https://www.bossdj.net/sampledeck/images/playpausemode-icon.png">
    <span id="playpauseorrapidpressonoff" style="display:none;">off</span>
    <input class="ssvolume" type="range" id="ssvolume" min="0" max="1" value="1" step="0.01" onInput="setvolume();">

  </div>
  <div class="singlesamplertrigger" onClick="playsound();" id="singlesampler">Air Horn (Single)</div>
</div><br />
<!--Below audio element will be hidden in final code-->
<audio id="playerx" style="display: block; width: 280px" src="#" controls></audio>

Answer 1

You should initialise the src of the audio tag only once, and then just toggle the play/pause.

window.addEventListener('DOMContentLoaded', () => {
  var audiox = document.getElementById('playerx');
  audiox.src = "http://glentertainment.keybit.co.uk/audiop2/22%20Air%20Horn%20Single.mp3";
})

function playsound() {
  var audiox = document.getElementById('playerx');
  var playmode = document.getElementById('playpauseorrapidpressonoff').innerText;
  if (playmode != "off") {
    if (audiox.paused) {
      audiox.play()
    } else {
      audiox.pause()
    }
  } else {
    audiox.play();
  }
}