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

Posted

技术标签:

【中文标题】Javascript 方法 pause() 仅适用于音频元素【英文标题】:Javascript method pause() only works with audio element 【发布时间】:2012-05-11 03:07:04 【问题描述】:

所以我有这样的功能:

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 可能对此有一个简单的解决方案,但从我研究的结果来看,我找不到任何东西。

【问题讨论】:

你是如何暂停曲目的,你能展示一下吗? 比如我有一个元素; <audio id="song" src="audio"> 我使用 Javascript 来播放它:function play() document.getElementById("song").play(); 并暂停:function pause() document.getElementById("song").pause(); 抱歉,格式不好,由于某种原因,我的换行符没有出现在评论中。 它应该像那样工作。 【参考方案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。

【讨论】:

啊,我明白了。这就是上面带有 setTimeout 的示例有效的原因。感谢您的帮助,有什么方法可以在这里表示“感谢”或“荣誉”吗? 您可以通过单击问题上方的箭头来“投票”答案。如果某个答案有效地回答了您的问题,请单击复选标记将其选为答案。【参考方案2】:

我刚刚测试了一个 sn-p,它可以正常工作

function music(song) 

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


【讨论】:

【参考方案3】:

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

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

function pauseMusic() 
  audio.pause();

【讨论】:

以上是关于Javascript 方法 pause() 仅适用于音频元素的主要内容,如果未能解决你的问题,请参考以下文章

Parse Javascript Cloud Code .save() 仅适用于单个用户

javascript 函数仅适用于 firefox

JavaScript 函数仅适用于 Windows 机器

formatDate JavaScript 函数仅适用于 Chrome

HTML/CSS 解决方法 menu-toggle 仅适用于第一个元素

Javascript函数仅适用于表格的第一行[重复]