如何在 JavaScript 中停止播放音频答案

【问题标题】：How to stop an audio from playing in JavaScript如何在 JavaScript 中停止播放音频
【发布时间】：2014-09-20 23:52:01
【问题描述】：

抱歉标题令人困惑，但我有以下问题。我正在开发一个人们可以按下链接并播放歌曲的网站，但在有多个链接（用于播放歌曲）的页面中，用户可以按下所有链接并且所有歌曲同时开始播放。因此，这使得当前选择的歌曲难以听到。

所以，我想做的是，在按下新链接时取消/停止最后播放的歌曲。这是我的代码。

<div class='content'> 
    click <a href="javascript:play_wav('h');" class='h play-audio'> here </a> 
    to play the song
</div>


function play_wav(audio_name)
{
    var src = document.querySelector('.'+audio_name).innerHTML = 
        "<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>";
    document.querySelector('.audio_'+audio_name).play();  
}

不要介意质量不好，但是正如你所看到的，当链接被按下时，DOM 集成了一个<audio src='audio/foo.wav' class='audio_foo"'> 然后脚本找到audio_foo 类并播放歌曲。

但是当另一个链接被按下时，我如何将 DOM 重置为其原始状态或只是阻止它播放以前开始的歌曲？

【问题讨论】：

document.querySelector('.audio_'+audio_name).stop()?
然后改写问题标题。与问题内容无关。
@MelanciaUK 但是，这只会停止您正在单击的当前链接。不是正在播放的音频。
我的意思是有一种方法可以停止播放。这是.stop() 方法。您需要制定脚本逻辑以跟踪正在播放的内容。
你会这样做 -> jsfiddle.net/F5mMr/1

标签： javascript dom javascript-events

【解决方案1】：

您可以保留对当前播放歌曲的引用。

var current_audio;

function play_wav(audio_name)
{
  if (current_audio)
  {
    current_audio.stop();
  }

  var src = document.querySelector('.'+audio_name).innerHTML = "<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>";
  current_audio = document.querySelector('.audio_'+audio_name);
  current_audio.play();
}

我以前从未在 javascript 中使用过音频，但如果有 play 函数，我假设有 stop 函数。

希望这会有所帮助！

【讨论】：

谢谢，我会试试这个

【解决方案2】：

类似这样的：

function play_wav(audio_name) {
  // List of all audio tags
  var audios = document.querySelectorAll('audio')
  //Iterate over all
  for (var i = 0; i < audios.length; i++) {
    var audio = audios[i]
    // Stop playing
    audio.pause()
    // Remove node
    audio.parentNode.removeChild(audio)
  }

  var audio = document.querySelector('.'+audio_name)
  audio.innerHTML = "<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>"
  audio.querySelector('audio').play()
}

【讨论】：