Question

所以我有这样的功能：

function music(song) {
var audio = new Audio("audio/" + song + ".ogg");
audio.play();
}

我遇到的问题是audio.play（）工作正常，但如果我稍后尝试audio.pause（）（在定义相同的变量之后），它就不起作用了。但是，如果我这样做：

function music() {
var audio = document.getElementById("songname");
audio.play();
}

然后我可以定义变量，然后使用audio.pause（）来暂停轨道。问题是我想在javascript中执行此操作，因为我有很多曲目，我不想为每个曲目创建音频元素。

为什么第一段代码不允许我稍后暂停音频？我有什么方法可以让它暂停音频吗？如果没有，是否有任何替代方案涉及通过传递一个参数，即歌曲标题从javascript播放音频？我不想在html中包含src。

我怀疑jQuery可能有一个简单的解决方案，但形成了我研究过的，我找不到任何东西。

Answer 1

audio仅存在于函数内部。如果您需要在函数外部访问它，则返回您正在创建的Audio对象的实例：

function getAudio(song, play) {
var audio = new Audio("audio/" + song + ".ogg");
  if(play) {
    audio.play();
  }

  return audio;
}

var theTrack = getAudio('my_song', true);
theTrack.pause(); // pause the song
theTrack.play();  // play the song

第二个例子是指我假设的是一个音频元素，它反过来暴露了Audio对象的功能。第二个函数在任何地方工作的原因是因为DOM元素始终存在于DOM中，并且您引用它来获取底层的Audio API，而不是直接使用Audio对象/ API。

Answer 2

我刚刚测试了一个片段，它可以正常工作

function music(song) {

    var audio = new Audio("audio/" + song + ".ogg");
    audio.play();
    setTimeout(function() { audio.pause(); }, 5000);

}

Answer 3

您可以在定义函数之前创建音频变量。

var audio = new Audio();
function playMusic(song) {
  audio.src = "audio/" + song + ".ogg";
  audio.play();
}
function pauseMusic() {
  audio.pause();
}

Javascript方法pause（）仅适用于音频元素

3 个答案: