1. html5 样式

<audio class="audioleft download" id="audVoice" type="audio/mpeg" autoplay="autoplay">
<source src="" id="audSource" />
</audio>

这种方法写完之后播放不了,原因不明

解决办法:

<audio class="audioleft download" id="audVoice"  type="audio/mpeg" src="" preload="auto" oncanplay="addTime()"></audio>

可以成功播放

type="audio/mpeg" 播放MP3格式的

preload="auto"  预加载 默认auto

oncanplay="addTime()"  //当加载完成调用此方法 oncanplay 监听

将获取的音频写到标签中

function addTime(){
//将语音的时间写上去
var mpLength=seToMi($("#audVoice")[0].duration);
//将时间写上去
$("#mpLength").html(mpLength);
}

播放:$("#audVoice")[0].play();

停止:$("#audVoice")[0].pause();

html5 页面音频的更多相关文章

  1. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  2. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  3. HTML5: HTML5 Audio(音频)

    ylbtech-HTML5: HTML5 Audio(音频) 1.返回顶部 1. HTML5 Audio(音频) HTML5 提供了播放音频文件的标准. 互联网上的音频 直到现在,仍然不存在一项旨在网 ...

  4. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  5. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  6. 微信HTML5页面设计建议

    一个HTML5页面从提出到完成上线的流程:>   1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...

  7. html5页面与android页面之间通过url传递参数

    html5页面与android页面之间可以通过url传递参数,android将参数放在htm5的url  ?后面,js获取url  ?号后面的参数. 方法一: <scrīpt> /* 用途 ...

  8. 转:HTML5页面如何在手机端浏览器调用相机、相册功能

    HTML5页面如何在手机端浏览器调用相机.相册功能 开发微信端浏览器访问的HTML5的页面,页面中有一个<input id="input" type="file&q ...

  9. HTML5页面开发的基础性模板

    分享一个HTML5页面开发的基础性模板,包含了两个版本: 开发版本 注释版本 开发版本 <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. Objective-C 2.0 基础要点归纳

    本文的阅读基本条件: 具备C/C++基础知识,了解面向对象特征 阅读过<Objective-C 2.0 程序设计(第二版)>.<Objective-C 程序设计 第6版>或相关 ...

  2. 约瑟夫环问题(Josephus)

    约瑟夫环:用户输入M,N值,从1至N开始顺序循环数数,每数到M输出该数值,直至最后一个元素并输出该元素的值. 一.循环链表:建立一个有N个元素的循环链表,然后从链表头开始遍历并记数,如果计数值为M,则 ...

  3. Bootstrap popover源码分析

    /* ======================================================================== * Bootstrap: popover.js ...

  4. Lein droid

    最近尝试使用Clojure,发现有个Lein droid的项目可以方便的在android下使用Clojure. http://clojure-android.info/#get-started 尝试了 ...

  5. [RK3288][Android6.0] Display驱动初始化流程小结【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/52584903 Platform: RK3288OS: Android 6.0Kernel: ...

  6. YTU 2516: 剪刀石头布

    2516: 剪刀石头布 时间限制: 1 Sec  内存限制: 128 MB 提交: 193  解决: 123 题目描述 小慧小时候很喜欢和她的小伙伴们一起玩剪刀(Scissors).石头(Rock). ...

  7. Spring实战笔记

    晚上看了这本书的前面几章,记录一下自己看到的要点. 全书分为四大部分,Spring核心,web,后台相关,与其它框架集成.今天主要看了第一部分. Spring最根本的使命是简化Java开发,全方位的简 ...

  8. bzoj2594 [Wc2006]水管局长数据加强版——LCT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2594 时间倒序一下,就是 魔法森林 那道题: 有个不解的地方,是 access 里面关于 p ...

  9. 如何截取iframe的内容,修改他的CSS

    function   setv(){        $("#innerContent").contents().find(".listTable-01").cs ...

  10. JSP页面结构

    1.表达式格式(experssion):<%=value %>//用来在页面中调用java表达式,从而得到返回值 <%=new java.util.Date();%> 2.小脚 ...