码迷,mamicode.com
首页 > Web开发 > 详细

html5 的<audio> 音频 audio的“坑”

时间:2014-10-27 19:27:43      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   sp   div   on   

<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‘, truetrue, window, 1, 12, 345, 7, 220, falsefalsetruefalse, 0, null ); 

Elem.dispatchEvent(evt);  

 

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

 


 

 


 

html5 的<audio> 音频 audio的“坑”

标签:style   blog   http   io   color   ar   sp   div   on   

原文地址:http://www.cnblogs.com/heimanba/p/4054835.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!