HTML5学习系列之Audio(1)

开始了Html5的学习了，这个学习将是一系列的!请随我一步一步的来~~基础的东西很多地方都有讲，这儿就讲点深得。 当然这个顺序是按照个人喜好了 1、play和playing事件，这两个事件比较容易混淆。区别就在于play发生在缓冲开始时，而playing发生在缓冲结束时。 这些事件可以用jQuery或在html中绑定对应的方法。 如果用html的

　　

　　开始了Html5的学习了，这个学习将是一系列的!请随我一步一步的来~~基础的东西很多地方都有讲，这儿就讲点深得。

　　当然这个顺序是按照个人喜好了

　　1、play和playing事件，这两个事件比较容易混淆。区别就在于play发生在缓冲开始时，而playing发生在缓冲结束时。

　　这些事件可以用jQuery或在html中绑定对应的方法。

　　如果用html的话，可以用例如onWaiting=waiting()的语句。

　　Gary比较喜欢用jQuery提供的bind方法来绑定事件。代码如下。

　　p.bind('playing',playing());audio标签的方法

　　html5中的媒体标签所提供的方法很简单，如下。

　　p.load();p.play();p.pause();p.stop();

　　这里需要注意的是，Gary发现这些方法与jQuery存在不兼容的现象。表现为利用jQuery的获取的Media类型元素无法执行这些方法，它们必须在用js原生的document.getElementByIdx_x_x_x_x()方法获取的元素上执行。

　　2、这篇文章 对 audio讲解的相当深刻

　　http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio-and-video-what-you-must-know/

　　节选 一段 ：

　　当媒体文件准备播放时

　　当您的浏览器第一次在网页上遇到这样的视频(或音频)元素时，这时媒体文件还未准备好被播放。浏览器需要下载并对视频(或音频)进行解码，这样它才能播放。 一旦这些完成之后，媒体元素会触发canplay事件。通常这是您初始化控件和删除任何“加载‘指示的时候。 因此您初始化控件的代码将如下所示：

　　video.addEventListener('canplay', initialiseControls, false);

　　没有什么异常兴奋的事情发生。 该控件的初始化使播放/暂停能切换按钮，并且能重置在搜索栏中的播放箭头按钮。

　　备注

　　这些事件在加载过程中是按下列顺序触发的：loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。

　　但是，有时候该事件不会立即触发(或至少当您希望它触发时才触发)。 有时，视频暂停下载，因为该浏览器正试图为您保存太多的下载。如果您期望canplay事件，但该事件只有当您给媒体元素一些推动时才触发，这样的话会让人很头疼。因此相反的，我们开始监听loadeddata事件 这就是说有一些数据已经被下载了，尽管不是全部的数据。这就意味着元数据是可用的(高度，宽度，时间段等等)并且一些媒体内容也这样——但不是所有的。通过允许用户在loadeddata触发时开始播放视频，这会使像火狐等浏览器从一个暂停的状态转换到下载剩余的媒体内容，从而允许它播放整个视频。因此，事实上，在事件周期使用户界面能下载数据的正确的时间点是loadeddata:

　　video.addEventListener('loadeddata', initialiseControls, false);

　　其实这段文字来自于书 《Introduction HTML5》

　　http://introducinghtml5.com/

　　这个网站中有很多书中的例子，但是要英文 好才可以哦 。

　　3、下面这篇文章我也非常喜欢

　　http://blog.csdn.net/wyqlxy/article/details/6702278

　　这位博主，在最后引出了非常优秀的Audio网站

　　4、w3c上有个很全面的示例video的各种属性和时间的测试

　　http://www.w3.org/2010/05/video/mediaevents.html

　　5、

　　事件处理方式

　　一般有两种方式处理事件。

　　一种是监听的方式：addEventListener(“事件名”，处理函数，处理方式)。例如，如果需要在浏览器对媒介进行播放时执行begin_playing函数，那么可以这样，media. addEventListener(“play”， begin_playing，false)。

　　另一种是直接赋值的方式：on时间名=处理函数，这是我们相对用的较多的方法，也就是“当XXX事件触发时”。例如，要进行和上面相同的处理，可以这样media.οnplay= begin_playing。

　　事件介绍

　　loadstart事件：浏览器开始请求媒介;

　　progress事件：浏览器正在获取媒介;

　　suspend事件：浏览器非主动获取媒介数据，但没有加载完整个媒介资源;

　　abort事件：浏览器在完全加载前中止获取媒介数据;

　　error事件：获取媒介数据出错;

　　emptied事件：媒介元素的网络状态突然变为未初始化;

　　stalled事件：浏览器获取媒介数据异常;

　　play事件：即将开始播放

　　pause事件：暂停播放

　　loadedmetadata事件：浏览器获取完媒介资源的时长和尺寸

　　loadeddata事件：已加载当前播放位置的媒介数据;

　　waiting事件：播放由于下一帧无效(例如未加载)而已停止(但浏览器确认下一帧会马上有效);

　　playing事件：已经开始播放

　　canplay事件：浏览器能够开始媒介播放，但估计以当前速率播放不能直接将媒介播放完(播放期间需要缓冲);

　　canplaythrough事件：浏览器估计以当前速率直接播放可以直接播放完整个媒介资源(期间不需要缓冲);

　　seeking事件：浏览器正在请求数据(seeking属性值为true);

　　seeked事件：浏览器停止请求数据(seeking属性值为false);

　　timeupdate事件：当前播放位置(currentTime属性)改变;

　　ended事件：播放由于媒介结束而停止;

　　ratechange事件：默认播放速率(defaultPlaybackRate属性)改变或播放速率(playbackRate属性)改变;

　　durationchange事件：媒介时长(duration属性)改变;

　　volumechange事件：音量(volume属性)改变或静音(muted属性)。

　　6、关于video属性的详细说明可推荐这篇文章：

　　http://www.5icool.org/a/201006/563_5.html

　　本文来自忘尘子的博客，原文地址：http://blog.sina.com.cn/s/blog_655388ed01011r42.html