<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. BEA WebLogic Server 10 查看和配置日志

    查看和配置日志 WebLogic Server 内的每个子系统都可生成日志消息来传达其状态.例如,当启动 WebLogic Server 实例时,安全子系统会输出消息以报告其初始化状态.为了记录其子系 ...

  2. Android 定时器实现的几种方式和removeCallbacks失效问题详解

    实现定时器有很多种方式,在这里我简单的介绍几种方式 (1)使用Handler + Runnable的方式 Handler handler = new Handler(); Runnable runna ...

  3. 小白日记36:kali渗透测试之Web渗透-手动漏洞挖掘(二)-突破身份认证,操作系统任意命令执行漏洞

    手动漏洞挖掘 ###################################################################################### 手动漏洞挖掘 ...

  4. STL之heap

    STL的堆操作 STL里面的堆操作一般用到的只有4个:make_heap();.pop_heap();.push_heap();.sort_heap(); 他们的头文件函数是#include < ...

  5. java中访问mysql数据库中的表结构信息

    package cn.hncu.meta; import java.sql.Connection;import java.sql.DatabaseMetaData;import java.sql.Re ...

  6. css笔记06:层叠样式选择器

    1. (1)HTML文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  7. iOS之与JS交互通信

    随着苹果SDK的不断升级,越来越多的新特性增加了进来,本文主要讲述从iOS6至今,Native与JavaScript的交互方法 一.UIWebview && iframe && ...

  8. MAC mysql安装及设置

    MAC下安装MYSQL有两种方式,一种为压缩包形式 另一种为.dmg文件安装包 . 首先先介绍压缩包形式的安装方法:   去MySql官网下MySQL classic版mysql-5.1.54-osx ...

  9. logstash jdbc 各种数据库配置

    MySQL数据库 Driver ="path/to/jdbc-drivers/mysql-connector-java-5.1.35-bin.jar"   //驱动程序Class ...

  10. 配置tomcat连接器后,启动服务报错“No Certificate file specified or invalid file format"异常

    1:原来的配置是 <Connector port="8443" protocol="HTTP/1.1" SSLEnabled="true&quo ...