<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. 一天一个mysql函数(一) cast && convert

    MySQL 的CAST()和CONVERT()函数可用来获取一个类型的值,并产生另一个类型的值.两者具体的语法如下: CAST(value as type); CONVERT(value, type) ...

  2. 探索 Linux 内存模型--转

    引用:http://www.ibm.com/developerworks/cn/linux/l-memmod/index.html 理解 Linux 使用的内存模型是从更大程度上掌握 Linux 设计 ...

  3. 使用文档注释(javadoc)

    相信作为Java程序猿,几乎每个人都使用过javac,Java这样的命令吧.想想我们平时使用的Java帮助文档(API),感觉挺好用的,其实它就是使用Java中的命令javadoc做成的.下面简单介绍 ...

  4. cocos2d-x lua 使用自定义消息EventCustom

    cocos2d-x lua 使用自定义消息EventCustom version: cocos2d-x 3.6 1.发送消息 -- post message -- event将会被传递给消息接收函数, ...

  5. Debian 7 升级内核

    Debian 7(wheezy)的内核是3.2,要想把内核升级到3.16怎么办呢?使用backports源! 一.添加backports源 打开/etc/apt/source.list文件,加入以下: ...

  6. oracle 中将字符转换为blob 类型

    示例如下: select id,mblx,mbmc,TO_BLOB(UTL_RAW.CAST_TO_RAW(mbsj))mbsj,qyid,qycode from tempuser.temp_cwht ...

  7. Nginx - Core Module Directives

    The following is the list of directives made available by the Core module. Most of these directives ...

  8. HDOJ2004成绩转换

    成绩转换 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  9. Android的按钮单击事件及监听器四种常见的实现方式

    第一种:匿名内部类作为事件监听器类<ignore_js_op>大部分时候,事件处理器都没有什么利用价值(可利用代码通常都被抽象成了业务逻辑方法),因此大部分事件监听器只是临时使用一次,所以 ...

  10. sqlserver之二进制和字符串sql语句

    正常情况下我们对数据库的操作就是如下的写法来操作数据库 ID AS 编号,BookName AS 书名 FROM dbo.books ORDER BY ID; ; 但是在客户正在使用的数据库里,我们开 ...