html5 audio的暂停与播放
在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的暂停与播放的更多相关文章
- js控制html5 audio的暂停、播放、停止
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件
CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件 原因略. 解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...
- HTML5 audio标签自制音乐播放器
相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...
- HTML5背景音乐的暂停与播放
HTML代码: <audio id="myaudio" loop="loop" preload="auto" autoplay ...
- HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- 解决html5 audio iphone,ipd,safari不能自动播放问题
html audio 在iPhone,ipd,safari浏览器不能播放是有原因滴 (在safri on ios里面明确指出等待用户的交互动作后才能播放media,也就是说如果你没有得到用户的acti ...
- MUI音乐播放html5+audio模块
html5+ audio 模块MUI播放音频 Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件.通过plus.audio获取音频管理 ...
随机推荐
- [POJ3111]K Best(分数规划, 二分)
题目链接:http://poj.org/problem?id=3111 求选k对数,使得上述式子值最大.容易想到设左边为一个值,对式子变形以下,得到sigma(v-r*w))==0的时候就是最大的,& ...
- SQL2008 的 日期数据类型
摘要 你是否曾经想在数据库中存储一个日期而没有时间部分,或者想存储一个时间值希望有更高的精度?在SQL Server 2008的介绍中,微软介绍了一些新的日期数据类允许你只存储一个日期.更高精度的时间 ...
- nancy中视图呈现 Html.Partial(RenderPage的替代品)
在mvc中有RenderPage 用来呈现其他视图的内容,而在nancy中没有RenderPage.怎么办呢? mvc中RenderPage的替代品,就是 Html.Partial. 使用方式 @Ht ...
- mysql事务处理
事务处理能保证所有的sql操作一次性完成或回滚,mysql默认的MyISAM表类型是不支持事务处理的,如果需要做事务处理,需要把表类型换成InnoDB <?php $dsn='mysql:hos ...
- 当shiro做成动态URL管理时出现循环注入BeanCurrentlyInCreationException的问题解决方法
<!-- Shiro的Web过滤器 --> <bean id="shiroFilter" class="org.apache.shiro.spring. ...
- linux centos 安装mysql
安装步骤 http://www.cnblogs.com/gaojupeng/p/5727069.html 下面这个报错 主要还是在 题啊加软连接的 命令出了问题 1.启动 报错 mysqld_s ...
- Sprint1(第七天11.20)
Sprint1(11.20) Sprint1第一阶段 1.类名:软件工程-第一阶段 2.时间:11.14-11.23 3.选题内容:web版-餐厅到店点餐系统 4.我们详细分析了点餐系统实现的具体 ...
- c#数据绑定(2)——删除DataTable的数据
文/嶽永鹏 c#数据绑定(1)中,简要的通过代码应用了DataTable,DataTableColumns,DataTableRow类,通过UI界面的Textbox向DataTable中添加数据然后响 ...
- G:数字三角形
总时间限制: 1000ms 内存限制: 65536kB描述73 88 1 02 7 4 44 5 2 6 5 (图1) 图1给出了一个数字三角形.从三角形的顶部 ...
- 油猴 greasemonkey 背景音乐 火狐 chrome 背景音乐
火狐,chrome背景音乐 http://www.w3school.com.cn/tags/tag_audio.asp js插入背景音乐,猴油脚本使用 var audio = document.cre ...