<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. apache 配置order allow deny讲解

    http://www.111cn.net/phper/apache/43025.htm

  2. 替换运算符 shell

        ${变量:-word}如果变量存在且非空,则返回其值:否则返回word                  用于:如果变量未定义,则返回默认值即word      ${变量:+word}如果变量 ...

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

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

  4. 为MYPoint类写一个分类

    #import <Foundation/Foundation.h> //xieyi @protocol showOn @required -(void)printOn; @end // l ...

  5. [改善Java代码]断言绝对不是鸡肋

    建议19: 断言绝对不是鸡肋 在防御式编程中经常会用断言(Assertion)对参数和环境做出判断,避免程序因不当的输入或错误的环境而产生逻辑异常,断言在很多语言中都存在,C.C++.Python都有 ...

  6. 关于Override在JDK1.5和JDK1.6上子类实现接口中方法使用@Override注解编译错误.

    遇到这个问题说来也怪.新开了一个path的工作空间用来打patch.该Eclipse的默认全局的编译版本是1.6.但是唯独其中的一个插件项目的版本是1.5(可能是唯一的一个,不确定,不知道为什么会是这 ...

  7. VbCrlf的相关说明

    今天从别人发来的手顺书中发现了这几个字母,一头雾水,下面查了一下相关资料. vbCrLf是Visual Basic中的一个字符串常数,即“Chr(13) & Chr(10)”(回车符与换行符连 ...

  8. js中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...

  9. 使用CSS实现一个简单的幻灯片效果

    方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...

  10. Android报错:The content of the adapter has changed...与Channel is unrecoverably broken and will be disposed的分析与解决办法

    在Android中adapter错误: The content of the adapter has changed but ListView did not receive a notificati ...