`
ch_kexin
  • 浏览: 911975 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

Why won't my HTML5 audio loop?

 
阅读更多

问题：

 

 

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); 
} 

Then it should loop even in unsupported browsers。

分享到：
| HTML5 使用aduio标签打造音乐播放器【 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    电信CS-TY2-2wcn,移动和家亲CS-MY2-2why，200W像素刷萤石云固件CS-CP1-1C2WFR可解

    电信CS-TY2-2wcn,移动和家亲CS-MY2-2why，200W像素刷萤石云固件CS-CP1-1C2WFR可解

    CS-MY4-4WHY和家亲 刷公版固件

    CS-MY4-4WHY和家亲刷公版固件相关知识点： 刷机是一种通过软件更新设备固件或操作系统的手段，通常用于电子设备和智能手机。在刷机过程中，用户需要下载特定固件版本，并通过特定软件将固件烧录到设备的存储介质中...

    湖北省武汉市北大附中武汉为明实验中学八年级英语下册 Unit 8 Why don’t you get her a scarf？基

    " 和 "Sorry, dad, I won’t be long." 这两句话用到了 "mind doing" 表示介意做某事，以及 "be long" 表示不会花费很长时间。 - "I can do it all by myself. I’m sure. It’s no problem." 这里强调了独立完成...

    跨境电子商务客户服务：处理跨境客服常见问题.pptx

    Why has my order been closed？ How do I use a coupon or discount？ 任务操作 问题1: I got an error message during the payment process. What should I do？ 回答: If you got an error message on our ...

    新人教版八年级下册英语 Unit 4 why dont you talk to your parents？ 全套课件.pptx

    本课件主要围绕八年级下册新人教版初中英语Unit 4 "Why don’t you talk to your parents?"展开，旨在帮助学生掌握如何用情态动词"should"和"could"来谈论问题并给出建议，以及使用结构"Why don’t you…"给出建议的...

    5 Why 分析法培训资料

    《5 Why 分析法详解与应用》 5 Why 分析法是一种源于丰田生产系统的诊断工具，主要用于探究问题的根本原因，防止问题重复发生。通过连续提问五个“为什么”，以揭示问题背后的深层次原因，达到解决问题的目的。这种...

    萤石CS-CP1-2C3WF刷机固件，可刷MY3-3WHY机型

    标题中的“萤石CS-CP1-2C3WF刷机固件，可刷MY3-3WHY机型”指的是萤石公司的一款网络摄像头产品，型号为CS-CP1-2C3WF，该固件是为了升级或恢复设备的系统而设计的。"刷机"在IT领域通常指的是更新或替换设备的操作系统...

    国家教师资格面试 教案设计7—初中英语《why don‘t you talk to your parents？》.pdf

    ）、“I have too many...”（我太多...）、“Why don’t you...”（你为什么不...）等，其中重点是使用"Why don't you..."结构提供建议。 2. 教学内容着重于学习和掌握基本词汇、短语以及句型，并能够灵活运用这些...

    why-dont-students-like-school.pdf

    Why Don't Students Like School? 作者: Daniel T. Willingham 出版社: Jossey-Bass 副标题: A Cognitive Scientist Answers Questions About How the Mind Works and What It Means for the Classroom 出版年: 2010...

    5个Why分析法

    5个Why分析又称5问法，最初由丰田公司提出并在丰 田公司广泛采用，因此也被称为丰田5问法。 5个Why报告在日系企业利用的很多，其首创是丰田公司的大野奈一，来源于一次新闻发布会，有人问，丰田公司的汽车质量怎么...

    Pro HTML5 Programming

    pundits, they’ll tell you that HTML5 won’t be ready for ten years or more! Why, then, would anyone think that now’s the time for a book called Pro HTML5 Programming? That’s easy. Because for ...

    电信CS-TY3-2WCN,移动CS-MY3-3WHY, 可解固件萤石CS-CP1-2C3WF ,300W像素

    电信CS-TY3-2WCN,移动CS-MY3-3WHY, 可解固件萤石CS-CP1-2C3WF ,300W像素

    Master Audio AAA Sound4.2.3.rar

    Master Audio：AAA Sound Unity高级音效编辑插件: Master Audio gives you tremendous ease of use, speed, power and flexibility far beyond any contender. Why use another underpowered solution and waste ...

    5Why问题分析法

    所谓5why分析法，又称“5问法”，也就是对一个问题点连续以5个“为什么”来自问，以追究其根本原因。虽为5个为什么，但使用时不限定只做“5次为什么的探讨”，主要是必须找到根本原因为止，有时可能只要3次，有时...

    追因分析法5why分析法整理.pdf

    追因分析法5why分析法整理 追因分析法，也被称作5个为什么分析法，它是一种诊断性技术，被用来识别和说明因果关系链，找到问题的根本原因，从而防止问题重演。该方法通过不断提问“为什么”来找到问题的真正根源，...

    Responsive Web Design with HTML5 and CSS3(PACKT,2ed,2015)

    This updated new edition covers all the most up-to-date techniques and tools needed to build great responsive designs, ensuring that your projects won’t just be built ‘right’ for today, but in the ...

    Master Audio AAA Sound v2020.3.7.unitypackage

    Master Audio gives you tremendous ease of use, speed, power and flexibility far beyond any contender. Why use another underpowered solution and waste your time writing code? We've coded every scenario...

    Digital Audio Editing Fundamentals 无水印pdf 0分

    streaming versus captive digital audio new media assets, digital audio programming and publishing platforms, and why data footprint optimization is important for modern day new media content ...

    Pro HTML5 Programming 2nd

    Why HTML5, and why all the excitement just now? What are the new design principles that make HTML5 truly revolutionary—but also highly accommodating? What are the implications of a plugin-free ...

Magicbox
Global site tag (gtag.js) - Google Analytics