使用 javascript 停止 html 声音

Question

我对 javascript 的使用不是很有经验，所以这个问题可能有点傻。我目前正在尝试开发音板。一切正常，除了一件事，我想在单击另一个按钮时停止声音，但我真的不知道该怎么做。

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

Html代码：

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

audio {
  visibility: hidden;
}

  <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')">

Answer 1

音频元素有 pause 方法。您可以像使用 play.

一样使用它

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

Answer 2

这个问题中提到了类似的内容：HTML5 Audio stop function。
Javascript在处理音频时有一个有用的方法，那个方法就是pause()。

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

然而，这给我们带来了 2 个问题。当您调用 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;

}

使用 javascript 停止 html 声音

Stop html sound with javascript

html

javascript

audio