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. Logstash学习系列之基础介绍

    Logstash功能特性 能集中处理各种类型的数据 能标准化不同模式和格式的数据 能快速的扩展自定义日志的格式 它具有收集,分析和转发数据流的功能 Logstash运行参数 -f 指定配置文件 -e ...

  2. 【转】Golang 关于通道 Chan 详解

    原文:http://blog.csdn.net/netdxy/article/details/54564436 在用 chan 类型时,发生死锁的错误,表面上看不出什么问题 ------------- ...

  3. 在GNS3下使用Cisco SDM 的教程

    安装步骤: 1..先安装jre-6u17-windows-i586se (最新版的)如图: 点击安装,直到安装完成. © 2.安装SDM2.5中文版SDM-V25 如图 : 出现欢迎安装向导,点击下一 ...

  4. 设计模式之外观模式(Facade)摘录

    23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程,它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...

  5. VC++ 提示无法打开包括文件“iostream.h”怎么办

    把 //#include "iostream.h" 改成 #include<iostream> using namespace std;                 ...

  6. 通过android XML 创建图形,降低对美工的依赖

    在开发中总会须要自己定义各种View的样式,假设总是依赖美工作图弄出须要的UI样式图片(比方:一个button要选中和默认两张图片),不但时间上会浪费.往往也会有适配问题. 尽管能够通过.9图来解决一 ...

  7. restlet 2.3.5 org.restlet包导入eclipse出现的com.sun.net.httpserver类包找不到问题

    准备过一遍restlet 2.3.5 JavaEE的源码. 环境 eclipse3.7.2 和 jdk 7.0 将org.restlet 包增加到eclipse中.出现 com.sun.net.htt ...

  8. 利用栈Stack实现队列(Queue)

    实现说明: 入队时,将元素压入s1; 出队时,推断s2是否为空,如不为空,则直接弹出顶元素:如为空.则将s1的元素逐个"倒入"s2.把最后一个元素弹出并出队; 这个思路,避免了重复 ...

  9. easyUI的getChanges中的inserted

    easyUI中的datagrid.treegrid编辑了数据,可以用getChanges命令来获取更新情况.按道理,有"inserted"."updated". ...

  10. Eclipse的安装使用

    1.从官网下载最新的Eclipse http://www.eclipse.org/downloads/