停止动态创建的音频答案

【问题标题】：stop dynamically created Audio停止动态创建的音频
【发布时间】：2016-11-18 13:22:54
【问题描述】：

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

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

比我让它播放

myAudio.play()

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

【问题讨论】：

使用myAudio.pause();

标签： javascript audio dynamic element

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

【讨论】：

没问题，编码愉快，先生。

【解决方案2】：

不要直接调用play。创建一个具有 currentAudio 属性的对象。给它一个以音频对象为参数的函数 play。当你点击播放并传递一个新的音频元素时，你可以在播放新的之前停止旧的，并保存引用。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：