在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. [POJ3111]K Best(分数规划, 二分)

    题目链接:http://poj.org/problem?id=3111 求选k对数,使得上述式子值最大.容易想到设左边为一个值,对式子变形以下,得到sigma(v-r*w))==0的时候就是最大的,& ...

  2. struts2漏洞集合

    [+]1 S2-005 CVE-2010-1870 CVE-2010-1870 影响版本:Struts 2.0.0 – Struts 2.1.8.1 官方公告:http://struts.apache ...

  3. ubuntu 配置 jdk的一些常见问题

    首先下好压缩包.我用的是tar.gz 然后在/usr下解压,用mv或rename修改下文件夹名字,省得名字太长,然后再配置环境变量. so easy. 然而,  接下来你肯定会用 source /et ...

  4. Java GUI编程

    ----基础 // 创建一个窗体对象        JFrame frame = new JFrame();        // 设置窗口大小        frame.setSize(300, 20 ...

  5. 两行代码搞定 JavaScript 的日期验证

    我们通常在 JavaScript 中验证日期,基本的思路大概是,先判断年月日是否有效,再判断当月是否有当日,比如一些月份没有 31 日,平年二月没有 29.30 日,闰年二月没有 30 日等等. 偶然 ...

  6. fineUI ueditor(可能别的editor也有)配置注意事项

    1.把ueditor配置在弹窗里的一些小问题 这种弹窗的原理 如果把ueditor放进这个小窗口里 放进items里(以下截图还没有放) 那么配置的ueditor是不可用的 就好像enable=fal ...

  7. HTML转义字符大全

    ISO Latin-1字符集:  — 制表符Horizontal tab  — 换行Line feed  — 回车Carriage Return  — Space ! ! — 惊叹号Exclamati ...

  8. 转:C/C++程序员简历模板

    https://github.com/geekcompany/ResumeSample/blob/master/c.md 本简历模板由国内首家互联网人才拍卖网站「 JobDeer.com 」提供. ( ...

  9. web.xml listener和event

    Listener接口 Event类 ServletContextListener ServletContextEvent ServletContextAttributeListener Servlet ...

  10. Docker实践,来自沪江、滴滴、蘑菇街架构师的交流分享

    架构师小组交流会:每期选一个时下最热门的技术话题进行实践经验分享. 第一期主题:容器实践.Docker 作为当前最具颠覆性的开源技术之一,其轻量虚拟化.可移植性是CI/CD,DevOps,微服务的重要 ...