用 javascript 停止 html 声音答案

【问题标题】：Stop html sound with javascript用 javascript 停止 html 声音
【发布时间】：2015-01-18 05:25:00
【问题描述】：

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

【问题讨论】：

标签： javascript html audio

【解决方案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;

}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：