Question

我动态创建像这样的点击事件（播放）音频元素

var myAudio = document.createElement('audio');
myAudio.setAttribute('src', mp3link);

比我让它玩

myAudio.play()

现在当我点击另一个元素并且下一首曲目开始播放时出现问题，我希望在这种情况下所有正在运行的音频之前停止。我该怎么做？

Answer 1

在NodeList中收集querySelectorAll('audio')的所有音频元素。
使用for循环遍历NodeList。
在每次迭代（循环）时，.pause()然后重置currentTime = 0。没有stop()方法，因此您必须暂停，然后将时间重置为0。
- 在代码段中，启动2个玩家，然后按播放按钮。
- 点击 stopAll 按钮。
- 再次点击播放按钮。

基本上，停止所有玩家，然后玩你想要的那个。这就是它正常完成的方式。当然，您将拥有动态播放器而不是硬编码类型，但stopAll()函数也可以使用动态创建的音频。

段

var xAudio = document.createElement('audio');
var mp3Link = 'http://glpjt.s3.amazonaws.com/so/av/pf-righteous.mp3'
xAudio.setAttribute('src', mp3Link);
document.body.appendChild(xAudio);

function play() {
  xAudio.play();
}

function stopAll() {
  var xGroup = document.querySelectorAll('audio');

  for (var i = 0; i < xGroup.length; i++) {
    xGroup[i].pause();
    xGroup[i].currentTime = 0;
  }
}

<body>
  <audio src="http://glpjt.s3.amazonaws.com/so/av/00.mp3" controls></audio>
  <audio src="http://glpjt.s3.amazonaws.com/so/av/balls.mp3" controls></audio>
  <br/>


  <button onclick="stopAll()">StopAll</button>
  <button onclick="play()">Play</button>
</body>

Answer 2

不要直接打电话。创建一个具有属性currentAudio的对象。给它一个功能播放，将音频对象作为参数。当你点击播放并传递一个新的音频元素时，你可以在播放新音频元素之前停止它，并保存参考。

Answer 3

在html

中只创建一个<audio id="audio"></audio>

var myAudio = document.getElementById('audio');
myAudio.setAttribute('src', mp3link);
myAudio.play()

每次点击新曲目时，它都会替换mp3源链接。

停止动态创建音频

3 个答案:

段