blocks|key|305163|text|你的代码可以在Chrome+(5.0.375)和Safari+(5.0)上运行。不会在Firefox+(3.6)上循环。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|305164|See+example.|offset|length|305165|var+song+=+new+Audio("file");
song.loop+=+true;
document.body.appendChild(song);​|code-block|syntax|javascript|305166|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4mACh/^0|0|0|C|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@$D|U|E|V|1|W]]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Your code works for me on Chrome (5.0.375), and Safari (5.0). Doesn't loop on Firefox (3.6).

<a href="http://jsfiddle.net/4mACh/" rel="noreferrer">See example.</a>

<pre><code>var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​
</code></pre>

blocks|key|3033246|text|结合@kingjeffrey和@CMS的建议添加更多建议:你可以在可用的地方使用loop，在没有的时候使用kingjeffrey的事件处理程序。你有一个很好的理由使用loop，而不是编写自己的事件处理程序:正如Mozilla+bug+report中所讨论的，虽然loop目前在我所知的任何浏览器中都不能无缝循环(没有间隙)，但它肯定是可能的，并且很可能在未来成为标准。您自己的事件处理程序在任何浏览器中都不会是无缝的(因为它必须遍历JavaScript事件循环)。因此，最好尽可能使用loop，而不是编写自己的事件。正如CMS在对Anurag的回答的评论中指出的那样，你可以通过查询loop变量来检测对loop的支持--如果它被支持，它将是一个布尔值(false)，否则它将是未定义的，就像它目前在火狐中一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3033247|把这些放在一起：|3033248|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();|code-block|syntax|javascript|3033249|entityMap|0|LINK|mutability|MUTABLE|url|https://bugzilla.mozilla.org/show_bug.cgi?id=654787^0|14|4|2B|4|3N|4|6Q|4|83|4|8D|4|2X|I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

To add some more advice combining the suggestions of @kingjeffrey and @CMS: You can use <code>loop</code> where 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 <code>loop</code> and not write your own event handler: As discussed in the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654787">Mozilla bug report</a>, while <code>loop</code> currently 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 <code>loop</code> where possible instead of writing your own event. As CMS pointed out in a comment on Anurag's answer, you can detect support for <code>loop</code> by querying the <code>loop</code> variable -- if it is supported it will be a boolean (false), otherwise it will be undefined, as it currently is in Firefox.

Putting these together:

<pre><code>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();
</code></pre>

blocks|key|305183|text|尝试使用jQuery作为事件侦听器，然后它将在火狐中工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|305184|myAudio+=+new+Audio('someSound.ogg');

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

myAudio.play();|code-block|syntax|javascript|305185|差不多吧。|305186|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Try using jQuery for the event listener, it will then work in Firefox.

<pre><code>myAudio = new Audio('someSound.ogg');

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

myAudio.play();
</code></pre>

Something like that.

blocks|key|300114|text|我是这样做的，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300115|<audio+controls="controls"+loop="loop">
<source+src="someSound.ogg"+type="audio/ogg"+/>
</audio>|code-block|syntax|javascript|300116|它看起来像这样|300117|​|300118|📷|atomic|offset|length|300119|300120|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/098b2ef04ce371d03d7f31260fc9e6d2.jpeg|imageAlt^0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|13|8|@]|9|@$N|14|O|15|1|16]]|A|$]]|$1|P|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

I did it this way,

<pre><code>&lt;audio controls="controls" loop="loop"&gt;
&lt;source src="someSound.ogg" type="audio/ogg" /&gt;
&lt;/audio&gt;
</code></pre>

and it looks like this

<img src="https://i.stack.imgur.com/zifYQ.jpg" alt="enter image description here">

blocks|key|305210|text|这是可行的，并且切换起来比上面的方法容易得多：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|305211|使用内联：onended="if($(this).attr('data-loop')){+this.currentTime+=+0;+this.play();+}"|offset|length|style|CODE|305212|通过$(audio_element).attr('data-loop','1');打开循环通过$(audio_element).removeAttr('data-loop');关闭循环|305213|entityMap^0|0|5|25|0|2|13|1B|15|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|K|$]]

This works and it is a lot easier to toggle that the methods above:

use inline: <code>onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"</code>

Turn the looping on by <code>$(audio_element).attr('data-loop','1');</code>
Turn the looping off by <code>$(audio_element).removeAttr('data-loop');</code>

blocks|key|305215|text|如果你知道声音的确切长度，你可以试试setInterval。你可以让setInterval每隔x秒播放一次声音。X就是你声音的长度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|305216|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|3247380|text|var+audio+=+new+Audio("http://rho.nu/pub/Game%2520Of%2520Thrones%2520-%2520Main%2520Theme%2520-%2520Soundtrack.mp3");

audio.addEventListener('canplaythrough',+function()+{
++++this.currentTime+=+this.duration+-+10;
++++this.loop+=+true;
++++this.play();
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3247381|只需在canplaythrough+eventlistener中设置loop+=+true。|unstyled|3247382|http://jsbin.com/ciforiwano/1/edit?html,css,js,output|offset|length|3247383|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1H|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|F|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<pre><code>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();
});
</code></pre>

Just set loop = true in the canplaythrough eventlistener.

<a href="http://jsbin.com/ciforiwano/1/edit?html,css,js,output" rel="nofollow">http://jsbin.com/ciforiwano/1/edit?html,css,js,output</a>

blocks|key|300143|text|最简单的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|300144|bgSound+=+new+Audio("sounds/background.mp3");
bgSound.loop+=+true;
bgSound.play();|code-block|syntax|javascript|300145|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simplest way is:

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

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.

Here's the basic code I'm using:

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

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?

UPDATE: The loop property is now <a href="http://www.w3schools.com/jsref/prop_audio_loop.asp" rel="noreferrer">supported</a> in all major browsers.

HTML5 Audio Looping

jQuery

HTML5

我最近一直在玩HTML5音频，虽然我可以让它播放声音，但它只会播放一次。无论我如何尝试(设置属性、事件处理程序等)，似乎都不能让它循环。下面是我使用的基本代码：//myAudio is declared at a global scope, so it doesn't get garbage collected.myA...

问HTML5音频循环
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5音频循环EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5音频循环
EN