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. 016 ppp authentication

    Press RETURN to get started!       Router>en Router#config t Enter configuration commands, one pe ...

  2. Python 获取新浪微博的热门话题 (API)

    Code: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-06-27 @author: guaguastd @name: ...

  3. WebForms UnobtrusiveValidationMode 须要“jquery”ScriptResourceMapping。

    一.问题产生的背景: 在敲牛腩新闻公布系统的后台登录页面的时候,我们用到了RequiredFieldValidator控件(验证非空控件),该控件的作用是禁止输入规定的内容,RequiredField ...

  4. 单一责任原则(SRP)

    1.就一个类而言,应该仅有一个引起它变化的原因. 2.在SRP中定义职责为:“变化的原因”.  如果你想到多个动机去改变这个类,那这个类就有多个职责

  5. luogu1966 火柴排队

    题目大意 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度.现在将每盒中的火柴各自排成一列,同一列火柴的高度互不相同,两列火柴之间的距离定义为: $\sum_{i=1}^n(a_i-b_i) ...

  6. spring 的核心接口

    spring有两个核心接口,BeanFactory 和ApplicationContext  ,其中ApplicationContext 是BeanFactory的子接口.他们代表了Spring容器. ...

  7. [RK3288][Android6.0] 系统按键驱动流程分析【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/77894406 Rockchip的按键驱动位于 kernel/drivers/input/ke ...

  8. visual studio , JavaScript , UnitTest

    https://docs.microsoft.com/en-us/visualstudio/cross-platform/tools-for-cordova/debug-test/basic-test ...

  9. 利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全)

    利用JFreeChart生成折线图 (4) (转自 JSP开发技术大全) 14.4 利用JFreeChart生成折线图 通过JFreeChart插件,既可以生成普通效果的折线图,也可以生成3D效果的折 ...

  10. confusion_matrix函数的使用

    from:http://blog.csdn.net/m0_38061927/article/details/77198990 官方文档中给出的用法是 sklearn.metrics.confusion ...