javascript - Javascript 方法 pause() 仅适用于音频元素

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 中，并且您引用它来获取底层音频 API，而不是直接使用音频对象/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();
}