Why won't my HTML5 audio loop?

最新推荐文章于 2024-05-07 17:47:43 发布

原创最新推荐文章于 2024-05-07 17:47:43 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

错误信息专栏收录该内容

25 篇文章

订阅专栏

本文探讨了网页音频循环播放的问题，并针对不同浏览器（如Chrome、IE9、Firefox）进行了具体分析，指出Firefox不支持音频循环播放的实现。同时提供了一种使用JavaScript检查浏览器是否支持音频循环的方法，并展示了如何在不支持的浏览器中实现音频循环播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

The site is up at: http://ajf.me/stuff/eva at the time of writing. The source code is this:

<!DOCTYPE html> 
<htmlstyle="height:100%;"> 
<head> 
<title>eva</title> 
</head> 
<bodystyle="background-color: black;background-image:url('eva.png');background-repeat: no-repeat;background-position: center center;height:100%;margin:0px;padding:0px;"> 
<audioautoplayloop> 
    <sourcesrc="eva.mp3"type="audio/mpeg"/> 
    <sourcesrc="eva.ogg"type="audio/ogg"/> 
    <sourcesrc="eva.wav"type="audio/wav"/> 
</audio> 
</body> 
</html>

The audio plays fine in Chrome, IE9, and Firefox, but does not loop in the latter. The audio file can't be malformed, as it was produced by Audacity. Is there any other explanation for why it doesn't loop?

回答：

in Chrome, IE9 You can just do this

<audio autoplay loop>

Firefox has not yet implemented loop. I would check that you have the newest version of Firefox, but I believe this is still the case. You can check whether or not it is supported with:

if(typeofnewAudio().loop =='boolean')

If that evaluates to true, then loop is implemented in the browser. If false, then it is not. Add that to your javascript, put an id tag on your audio and use that if statement to check for loop.

if!(typeofnewAudio().loop =='boolean'){ 
    audioToLoop = document.getElementById('audio_id_here'); 
    audioToLoop.addEventListener('ended',function(){ 
        this.currentTime =0; 
        this.play(); 
    },false); 
}