javascript pause() 重新启动音频而不是暂停它？

Question

我正在编写一个 (mp3) sample/jingle/sound 播放器按钮。

顶行有 2 个控制按钮和一个音量滑块，按下下面的部分将播放声音。

第一个控制按钮将循环模式切换为开（这是按预期运行的）

第二个控制按钮应该切换“play/pause”模式。

如果 play/pause 模式为“打开”并且您第二次按下按钮（在播放时）它应该暂停，当您第三次按下时应该恢复播放但目前，它重新启动从第二次按下开始。我哪里错了？

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

您应该只初始化音频标签的 src 一次，然后切换 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();
  }
}

javascript pause() 重新启动音频而不是暂停它？

javascript pause() restarts audio instead of pausing it?

javascript

html5-audio