HTML5 音频循环

Posted 2023-02-25

【中文标题】HTML5 音频循环

【英文标题】：HTML5 Audio Looping

【发布时间】：2010-07-17 22:40:33

【问题描述】：

我最近一直在玩 html5 音频，虽然我可以让它播放声音，但它只会播放一次。无论我尝试什么（设置属性、事件处理程序等），我似乎都无法让它循环。

这是我正在使用的基本代码：

//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();

我正在使用 Chrome (6.0.466.0 dev) 和 Firefox (4 beta 1) 进行测试，两者似乎都乐于忽略我的循环请求。有什么想法吗？

更新：循环属性现在在所有主流浏览器中都是supported。

【问题讨论】：

不确定 Chrome，但 Firefox 不支持循环播放。

一旦结束就启动它：myAudio.addEventListener("end", function(e)myAudio.play();, false);

@Brandon 我想知道为什么这不起作用？此代码与接受的答案之间的唯一区别是，在接受的答案中，它在调用play 之前将currentTime 设置为0。有必要吗？

@Brandon 是的，请参阅 kingjeffrey 对他自己的回答的第二条评论。您确实需要设置currentTime。

这确实工作得很好（至少今天）

【参考方案1】：

虽然指定了loop，但它并未在我知道的任何浏览器中实现 Firefox [感谢Anurag 指出这一点]。这是另一种循环方式，应该可以在支持 HTML5 的浏览器中使用：

var myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() 
    this.currentTime = 0;
    this.play();
, false);
myAudio.play();

【讨论】：

嗯...有趣。以前我对这种方法运气不佳，但我没有设置当前时间。当我尝试这个时，我得到：“this.currentTime = 0”行上的“Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1”

@Toji 这是INDEX_SIZR_ERR error 的文档。这意味着歌曲的开头超出了浏览器可以搜索的范围。如果浏览器认为它是流媒体，或者服务器缺少某些功能（我忘记了这个具体功能是什么，但我会尝试追踪它），有时会发生这种情况。也可以使用this.startTime返回最早可用时间。

@Toji 之所以需要.currentTime，与规范如何处理歌曲结尾有关。浏览器应该只是暂停歌曲。所以在歌曲结束时重新开始播放。必须重置播放头。

@Toji 如果您无法让.currentTime 工作，这是另一种想法。在回调函数中，您可以简单地使用相同的文件重新声明myAudio 并再次播放。重新声明它还应该将播放头重置为歌曲的开头。

将它设置为 this.startTime 会给我同样的错误，但现在我开始怀疑这是否是服务器问题。我正在从本地 django 服务器提供静态文件（这不是 django 最强大的功能）。将其与 Anurag 确实有效的事实相结合，我认为这可能只是我。我会多玩一点，然后告诉你结果。

【参考方案2】：

要结合@kingjeffrey 和@CMS 的建议添加更多建议：您可以在可用的地方使用loop，并在不可用时使用kingjeffrey 的事件处理程序。您想使用loop 而不是编写自己的事件处理程序有一个很好的理由：正如Mozilla bug report 中所讨论的，而loop 目前在我所知道的任何浏览器中都不能无缝循环（没有间隙），这当然是可能的，并且可能在未来成为标准。您自己的事件处理程序在任何浏览器中都不会是无缝的（因为它必须通过 javascript 事件循环来循环）。因此，最好尽可能使用loop，而不是编写自己的事件。正如 CMS 在对 Anurag 答案的评论中指出的那样，您可以通过查询 loop 变量来检测对 loop 的支持——如果支持，它将是一个布尔值 (false)，否则它将是未定义的，因为它目前在 Firefox 中。

把这些放在一起：

myAudio = new Audio('someSound.ogg'); 
if (typeof myAudio.loop == 'boolean')

    myAudio.loop = true;

else

    myAudio.addEventListener('ended', function() 
        this.currentTime = 0;
        this.play();
    , false);

myAudio.play();

【讨论】：

谢谢。这对 Opera、Firefox、Chrome 非常有效……那么我们如何为 Safari 添加更多声音（mp3）……？？？添加更多变量可能会导致 Chrome 重复（支持 ogg 和 mp3）...

@pixelass 我不完全确定如何在代码中做到这一点。在 HTML 中，您可以将 标签嵌套在另一个标签中，而浏览器会选择最外层匹配的标签。我不知道您是否可以在编程音频对象中进行嵌套。但您当然可以自己编程：查看 Audio.canPlayType 方法。

我知道 html 方法。我可能会尝试使用 Audio.canPlayType 方法。现在我正在使用 2 个变量，所以在 chrome 中播放 2 个文件。这实际上并不重要，因为它只是我制作的一些海浪循环。 ...但简单地添加 2 个来源会更好，。 pixelass.com 如果你在乎的话。

【参考方案3】：

您的代码适用于 Chrome (5.0.375) 和 Safari (5.0)。不在 Firefox (3.6) 上循环。

See example.

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​

【讨论】：

+1 非常酷。我不知道 loop 是在 webkit 中实现的。

+1，还可以检测是否支持loop，例如作者：typeof new Audio().loop == 'boolean';

@CMS 避免使用==而使用===，它对初学者来说是一个更好的操作符，对性能更好。

这与 Firefox 80 兼容吗？

【参考方案4】：

最简单的方法是：

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();

【参考方案5】：

var audio = new Audio("http://rho.nu/pub/Game%20Of%20Thrones%20-%20Main%20Theme%20-%20Soundtrack.mp3");

audio.addEventListener('canplaythrough', function() 
    this.currentTime = this.duration - 10;
    this.loop = true;
    this.play();
);

只需在 canplaythrough 事件监听器中设置 loop = true。

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

【参考方案6】：

尝试使用 jQuery 作为事件监听器，它将在 Firefox 中工作。

myAudio = new Audio('someSound.ogg');

$(myAudio).bind('ended', function()  
    myAudio.currentTime = 0;
    myAudio.play();
);

myAudio.play();

类似的东西。

【参考方案7】：

我是这样做的，

<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>

它看起来像这样

【参考方案8】：

这很有效，并且切换上述方法要容易得多：

使用内联：onended="if($(this).attr('data-loop')) this.currentTime = 0; this.play(); "

$(audio_element).attr('data-loop','1');开启循环 通过$(audio_element).removeAttr('data-loop');关闭循环

【参考方案9】：

如果您知道声音的确切长度，您可以尝试 setInterval。您可以让 setInterval 每 x 秒播放一次声音。 X 将是您声音的长度。

【讨论】：

这没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方发表评论 - 您可以随时评论自己的帖子，一旦您有足够的reputation，您就可以comment on any post。

@AlexChar 我不同意。这至少是试图回答这个问题。它可能会受益于一些扩展以准确显示代码的样子，这可能不是解决问题的最佳方法，但它不是“不是答案”。

这样做会遇到麻烦。