在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. 图解说明——究竟什么是Windows句柄

    图解说明——究竟什么是Windows句柄 参考资料:http://blog.csdn.net/newjerryj/article/details/4383701 http://www.cnblogs. ...

  2. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解

    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...

  3. [linux] scp无密码拷贝

    源服务器为s,ip为111.111.111.112. 目标服务器为d, ip为111.111.111.111 1>在源服务器新建用户 test_s, useradd test_s -g user ...

  4. iOS 圆的放大动画效果

    第一步:创建一个View,将这个View添加到当前的控制器 如: CGFloat timeW = self.view.bounds.size.width; timeAnimation * timean ...

  5. javascript中的窗口和框架

    框架: 在网络上我们可以看到很多WEB应用程序都是使用框架(frame)来分隔浏览器窗口的,就想一块块玻璃隔板把窗口分隔成好几个小窗口,并且可以在不同的小窗口中加载显示不同的页面,这样在我们看来好像是 ...

  6. 《C++ Primer》学习笔记【第二部分 C++标准库】

    第8章 IO库 IO对象不能复制,即1.IO对象不能存储在vector或其他容器中   2.如果需要传递或返回IO对象,必须传递或返回指向该对象的指针或引用. 一般情况下,如果要传递IO对象以便对它进 ...

  7. 采用dom4j和反射模拟Spring框架的依赖注入功能

    Spring的依赖注入是指将对象的创建权交给Spring框架,将对象所依赖的属性注入进来的行为.在学习了dom4j后,其实也可以利用dom4j和反射做一个小Demo模拟Spring框架的这种功能.下面 ...

  8. wampserver配置问题

    WAMPServer一些设置的问题 一.WAMPServer修改www目录路径 默认装好WAMPServer之后,会发现www目录路径是在wamp/www目录下,但是这样不满足个人的需求,我想把www ...

  9. 浅谈C#Socket

    好不容易把socket通信搞懂一点,比较喜欢做笔记,嘿嘿~ 希望共同学习,共同进步! socket通信是C#中非常基础的一个知识点,我这里用到的是基于Tcp协议的socket通信.Tcp会有三次握手连 ...

  10. PHP绘图

    创建图像的一般流程1.设定标头,告诉浏览器你要生成的绘图类型.2.创建一个图像区域,以后的操作都将基于此图像区域.3.在空白图像区域绘制填充背景.4.在背景上绘制图形轮廓输入文本.5.输出最终图形.6 ...