<audio>标签是html5的一个非常有意义的特性。告别的flash的时代。它的属性有:

autoplay:音频就绪后马上播放

controls:出现该属性,向用户显示播放的控件。

loop:是否在音频结束时候从新播放

preload:如果出现该属性,则在页面加载时候进行加载。

src:要播放的音频的URL。

方法有:

load():从新加载资源。

play():开始播放。

pause() :暂停播放。

这些都是基础的知识点。如果我们需要让音频自动播放的时候。在iphone中,我们发现是无法实现的 。

这里解决方案是在此页面的

 document.addEventListener('touchstart', function(){      document.querySelector("#musicBox").play()
}, true); 

能够实现播放的功能(意思是必须手动的触发)。

要是自动触发,必须事件机制有所了解。

在Mouse事件中:

var Elem = document.getElementById('pp');Elem.addEventListener('click', function(){	alert(111)}, true);var evt = document.createEvent('MouseEvent');evt.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );Elem.dispatchEvent(evt); 

同理在touch的事件中:

var Elem = document.getElementById('pp');
Elem.addEventListener('touchstart', function(){
    alert(111)
}, true);
var evt = document.createEvent('TouchEvent');
evt.initTouchEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null ); 

Elem.dispatchEvent(evt);

实现一个类似于jquery 的trigger的功能点

html5 的<audio> 音频 audio的“坑”的更多相关文章

  1. HTML5视频Video 音频Audio

    视频协议 视频格式 Flash HTML5 HTTP flv HTTP f4v HTTP mp4 HTTP m3u8 HTTP webm HTTP ogg RTMP flv RTMP f4v RTMP ...

  2. HTML5音视频播放(Video,Audio)和常见的坑处理

    1. 前言背景 在HTML5出现之前,Web页面访问音视频主要是通过Flash,Activex插件,还有微软后来推出的silverlight来展现的,尽管FLASH曾经风靡全球,但是随着互联网的不断发 ...

  3. HTML5 音频 <audio>

    HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...

  4. html5 audio音频播放全解析

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

  5. HTML5之Audio音频标签学习

    HTML5中的新元素标签 src:音频文件路径. autobuffer:设置是否在页面加载时自动缓冲音频. autoplay:设置音频是否自动播放. loop:设置音频是否要循环播放. control ...

  6. HTML5无插件多媒体Media——音频audio与视频video

    文件日志地址  http://blog.csdn.net/q1056843325/article/details/60336226 音频与视频现在已经变得越来越流行 各个网站为了保证跨浏览器的兼容性 ...

  7. Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  8. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  9. css总结16:HTML5 多媒体音频(Audio)视频(video )

    1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

随机推荐

  1. The Famous Clock

    描述 Mr. B, Mr. G and Mr. M are now in Warsaw, Poland, for the 2012’s ACM-ICPC World Finals Contest. T ...

  2. session超时和cookie过期

    一.Cookie的过期和Session的超时有什么区别? 会话的超时由服务器来维护,它不同于Cookie的失效日期.首先,会话一般基于驻留内存的cookie不是持续性的cookie,因而也就没有截至日 ...

  3. mongoDB 插入数据 用java实现

    import java.net.UnknownHostException; import com.mongodb.BasicDBObject; import com.mongodb.DB; impor ...

  4. SQL in与exists相关性能问题总结

    SQL  in与exists相关性能问题总结 in 和 exists in 和 exists的是DBA或开发人员日常工作学习中常用的基本运算符,今天我就这两个所带来的性能问题进行分析总结,方便自己与他 ...

  5. [改善Java代码]小心switch带来的空值异常

    使用枚举定义常量时,会伴有大量的switch语句判断,目的是伪类每个枚举项解释其行为,例如: public class Client { public static void main(String[ ...

  6. [改善Java代码]Lock与synchronized是不一样的

    很多编码者都会还说,Lock类和synchronized关键字用在代码块的并发性和内存上时语义是一样的.

  7. 关于Linux的总结(三)

    1.man_page.txt 1.内部命令:echo 查看内部命令帮助:help echo 或者 man echo 2.外部命令:ls 查看外部命令帮助:ls --help 或者 man ls 或者 ...

  8. JAVA网络编程常见问题

    一. 网络程序运行过程中的常见异常及处理 第1个异常是 java.net.BindException:Address already in use: JVM_Bind. 该异常发生在服务器端进行new ...

  9. 【Knockout】一、认识Knockout,你会爱上它

    介绍 Knockout简称ko,是一个轻量级的javascript类库,采用MVVM设计模式(即Model.view.viewModel),简单优雅的实现了双向绑定,实时更新,帮助您使用干净的数据模型 ...

  10. HDOJ2015偶数求和

    偶数求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...