在html5里,audio是新增的功能。它方便了用户。

大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 audio 元素来包含音频的标准方法。

audio 元素能够播放声音文件或者音频流。

不过它的兼容性还不完善。只有IE 9 支持MP3,Firefox 3.5和Opera 10.5支持Ogg Vorbi、Wav,Chrome 3.0支持Ogg Vorbis、MP3,Safari 3.0支持MP3、Wav。

如果要用js来控制audio的暂停与播放,我们不能直接在audio上添加点击事件,需要另外添加按钮才可以绑定点击事件。

HTML代码如下:

<button onclick="playPause()">播放/暂停</button>
<audio id="audio1" width="420" >
<source src="example.mp4" type="audio/mp4" />
<source src="example.ogg" type="audio/ogg" />
</audio>

JS代码如下:

var myAudio = document.getElementById('audio1');
function playPause(){
if(myAudio.paused){
myAudio.play();
}else{
myAudio.pause();
}
}

不过有些手机浏览器却不兼容play()和pause().需要自己研究一下再使用。

html5 audio的暂停与播放的更多相关文章

  1. js控制html5 audio的暂停、播放、停止

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  2. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  3. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

  4. HTML5背景音乐的暂停与播放

    HTML代码:     <audio id="myaudio" loop="loop" preload="auto" autoplay ...

  5. HTML5 audio 如何实现播放多个MP3音频

    <audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...

  6. HTML5 audio与video标签实现视频播放,音频播放

    随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...

  7. html5 audio音频播放全解析

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

  8. 解决html5 audio iphone,ipd,safari不能自动播放问题

    html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...

  9. MUI音乐播放html5+audio模块

    html5+ audio 模块MUI播放音频 Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件.通过plus.audio获取音频管理 ...

随机推荐

  1. Linux常用命令及shell脚本

    一.     用户管理(添加用户.切换用户.删除用户) ~                                                                        ...

  2. 关于leetcode中链表中两数据相加的程序说明

    * Definition for singly-linked list. * struct ListNode { * int val; * struct ListNode *next; * }; */ ...

  3. html,css命名规范 (转)

    HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...

  4. LINQ之路 6:延迟执行(Deferred Execution)

    LINQ中大部分查询运算符都有一个非常重要的特性:延迟执行.这意味着,他们不是在查询创建的时候执行,而是在遍历的时候执行(换句话说,当enumerator的MoveNext方法被调用时).让我们考虑下 ...

  5. Openfire Strophe开发中文乱码问题

    网站上有很多Openfire Web方案,之前想用Smack 但是jar包支持客户端版本的,还有JDK版本问题  一直没调试成功  估计成功的方法只能拜读源码进行修改了. SparkWeb 官网代码很 ...

  6. gdb调试基本命令(常用)

    gdb调试命令 1>. 启动gdb gdb 可执行程序的名字 2>. 查看代码 l -- 查看当前文件 -- 默认main函数 2. 查看其它文件: l 文件名:行号, 显示指定行号的上下 ...

  7. (转)Sqoop中文手册

    Sqoop中文手册 1.     概述 本文档主要对SQOOP的使用进行了说明,参考内容主要来自于Cloudera SQOOP的官方文档.为了用中文更清楚明白地描述各参数的使用含义,本文档几乎所有参数 ...

  8. IaaS/PaaS/SaaS

    如果你是一个网站站长,想要建立一个网站.不采用云服务,你所需要的投入大概是:买服务器,安装服务器软件,编写网站程序.现在你追随潮流,采用流行的云计算,如果你采用IaaS服务,那么意味着你就不用自己买服 ...

  9. Modbus RTU程序开发解读

    Modbus是很好的串口通信协议,其中RTU协议最为常用,通过Modbus RTU,我们可以轻松读写串口信息. 从官网下载libModbus,观察modbus.h可知关键的结构体为: typedef ...

  10. SQL Server 2014连接不到服务器解决方法

    多半是不小心使用qq管家之类软件加速系统时把SQL Server(MSSSQL)不小心关闭了 解决方法如下(以WIN8为例):