Question

我对使用javascript并不是很有经验，所以这个问题可能有点傻。我目前正在尝试开发音板。一切都工作得很好，除了一件事，我想在点击另一个按钮时停止声音，我真的不知道如何做到这一点。

这是我想要做的一个例子： 我点击按钮1，播放声音，当声音仍然播放时，我点击按钮2，按钮2的声音停止，而按钮2的声音开始播放。（依此类推每个按钮）

Html代码：

＆＃13;

function EvalSound(soundobj) {
  var thissound = document.getElementById(soundobj);
  thissound.play();
}

＆＃13;

audio {
  visibility: hidden;
}

＆＃13;

  <audio class="audio" id="a" src="" controls preload="auto" autobuffer></audio>
  <audio class="audio" id="b" src="b.wav" controls preload="auto" autobuffer></audio>
  <audio class="audio" id="c" src="c.mp3" controls preload="auto" autobuffer></audio>



  <input type="button" class="button" value="Button 1" onClick="EvalSound('a')">
  <input type="button" class="button" value="Button 2" onClick="EvalSound('b')">
  <input type="button" class="button" value="Button 3" onClick="EvalSound('c')">

＆＃13;

Answer 1

如果您拨打thissound.pause()，它将停止播放声音。你想要做的是能够在函数到达结束后调用thissound.pause()，并删除局部变量。这意味着您需要将其存储在全局变量中，例如，您可以调用currentsound，这样您就可以在EvalSound的另一个调用中访问它。这会让你得到这样的东西：

var currentsound;
function EvalSound(soundobj) {
    currentsound.pause();
    var thissound = document.getElementById(soundobj);
    thissound.play();
    currentsound = thissound;
}

然而，这给我们带来了两个问题。当您拨打EvalSound时，之前的声音会暂停，当它再次呼叫相同的声音时，它将从您暂停时的声音开始。因此我们需要设置开始播放所需的时间。另一个问题是，当您第一次拨打EvalSound时，currentsound将被取消定义，而调用currentsound.pause();将导致错误。要解决此问题，我们可以添加以下内容：

var currentsound;
function EvalSound(soundobj) {
    if(currentsound)
    {
        currentsound.pause();
    }
    var thissound = document.getElementById(soundobj);
    thissound.currentTime = 0;
    thissound.play();
    currentsound = thissound;

}

Answer 2

音频元素有pause种方法。您可以像使用play一样使用它。

http://www.w3schools.com/tags/av_met_pause.asp

Answer 3

在这个问题中提到了类似的东西：HTML5 Audio stop function。在处理音频时，Javascript有一个有用的方法，该方法为pause()。

Answer 4

试试这个，如果点击第二个按钮（id = b），停止第一个按钮调用声音（id = a）

var sound_a = document.getElementById('a');
a.pause();
a.currentTime = 0;

Answer 5

如果我正确理解你，你只需要在js中使用这样的东西：

function EvalSound(soundobj) {
  document.getElementsByClassName('audio').map(function(thissound) {
    if(thissound.id == soundobj) {
      thissound.start();
    }
    else {
      thissound.pause();
    }
  });
}

用javascript停止html声音

5 个答案: