Question

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

所以，我要做的是，在按下新链接时取消/停止上一首播放的歌曲。这是我的代码。

<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重置为原始状态或者只是阻止它播放以前开始的歌曲？

Answer 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中使用音频，但如果有stop函数，我假设有play函数。

希望这有帮助！

Answer 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()
}

如何阻止音频在JavaScript中播放

2 个答案: