Javascript HTML5 音频循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3273552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Audio Looping
提问by Toji
I've been playing with HTML5 audio recently, and though I can get it to play the sound it only ever will play once. No matter what I try (setting the properties, event handlers, etc) I can't seem to get it to loop.
我最近一直在玩 HTML5 音频，虽然我可以让它播放声音，但它只会播放一次。无论我尝试什么（设置属性、事件处理程序等），我似乎都无法让它循环。
Here's the basic code I'm using:
这是我正在使用的基本代码：
//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();
I'm testing using Chrome (6.0.466.0 dev) and Firefox (4 beta 1), both of which seem happy to ignore my requests for looping. Any ideas?
我正在使用 Chrome (6.0.466.0 dev) 和 Firefox (4 beta 1) 进行测试，它们似乎都乐于忽略我的循环请求。有任何想法吗？
UPDATE: The loop property is now supportedin all major browsers.
更新：所有主要浏览器现在都支持循环属性。
回答by kingjeffrey
While loopis specified, it is not implemented in any browser I am aware ofFirefox [thanks Anurag for pointing this out]. Here is an alternate way of looping that should work in HTML5 capable browsers:
虽然loop已指定，但未在我知道的任何浏览器Firefox [感谢 Anurag 指出这一点]。这是在支持 HTML5 的浏览器中工作的另一种循环方式：
var myAudio = new Audio('someSound.ogg');
myAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
myAudio.play();
回答by mgiuca
To add some more advice combining the suggestions of @kingjeffrey and @CMS: You can use loopwhere it is available and fall back on kingjeffrey's event handler when it isn't. There's a good reason why you want to use loopand not write your own event handler: As discussed in the Mozilla bug report, while loopcurrently doesn't loop seamlessly (without a gap) in any browser I know of, it's certainly possible and likely to become standard in the future. Your own event handler will never be seamless in any browser (since it has to pump around through the JavaScript event loop). Therefore, it's best to use loopwhere possible instead of writing your own event. As CMS pointed out in a comment on Anurag's answer, you can detect support for loopby querying the loopvariable -- if it is supported it will be a boolean (false), otherwise it will be undefined, as it currently is in Firefox.
添加一些结合@kingjeffrey 和@CMS 的建议的更多建议：您可以loop在可用的地方使用它，并在它不可用时退回到kingjeffrey 的事件处理程序。您想使用loop而不是编写自己的事件处理程序有一个很好的理由：正如Mozilla 错误报告中所讨论的，虽然loop目前在我所知道的任何浏览器中都不能无缝循环（没有间隙），但它肯定是可能的，并且可能会将来成为标准。您自己的事件处理程序在任何浏览器中都不会是无缝的（因为它必须通过 JavaScript 事件循环进行循环）。因此，最好尽可能使用loop而不是编写自己的事件。正如 CMS 在对 Anurag 回答的评论中指出的那样，looploop变量——如果它被支持，它将是一个布尔值 (false)，否则它将是未定义的，因为它目前在 Firefox 中。
Putting these together:
把这些放在一起：
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();
回答by Anurag
Your code works for me on Chrome (5.0.375), and Safari (5.0). Doesn't loop on Firefox (3.6).
您的代码适用于 Chrome (5.0.375) 和 Safari (5.0)。不在 Firefox (3.6) 上循环。
var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);?
回答by JazzCat
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();
});
Just set loop = true in the canplaythrough eventlistener.
只需在 canplaythrough 事件侦听器中设置 loop = true 即可。
回答by jai3232
Simplest way is:
最简单的方法是：
bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();
回答by Matt
Try using jQuery for the event listener, it will then work in Firefox.
尝试将 jQuery 用于事件侦听器，然后它将在 Firefox 中工作。
myAudio = new Audio('someSound.ogg');
$(myAudio).bind('ended', function() {
myAudio.currentTime = 0;
myAudio.play();
});
myAudio.play();
Something like that.
类似的东西。
回答by Tomarinator
I did it this way,
我是这样做的
<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>
and it looks like this
它看起来像这样
回答by WebsterDevelopine
This works and it is a lot easier to toggle that the methods above:
这是有效的，切换上述方法要容易得多：
use inline: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"
使用内联： onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"
Turn the looping on by $(audio_element).attr('data-loop','1');Turn the looping off by $(audio_element).removeAttr('data-loop');
打开循环通过$(audio_element).attr('data-loop','1');关闭循环通过$(audio_element).removeAttr('data-loop');
回答by Zack
You could try a setInterval, if you know the exact length of the sound. You could have the setInterval play the sound every x seconds. X would be the length of your sound.
如果您知道声音的确切长度，您可以尝试 setInterval。您可以让 setInterval 每 x 秒播放一次声音。X 将是您的声音的长度。
