HTML5Audio标签API总结

本来前段时间做完那个播放器就该做总结的。但是正好遇到了点事情。忙了一阵子。这两天抽了个空来写总结来了。过两天马上就又要忙了。没办法程序员就是如此苦逼。大家都懂得。

OK~废话不多说。

那么首先来看一下audio标签中的一些常用属性：

来看下对于音乐格式的支持：

这个表偷懒啦。网上别人文章中扣来的。

audio可通过new来创建。也可以通过用document来获取。

//通过new关键字来创建Audio对象
var Music = new Audio("test.mp3");
//通过document来获取已经存在的Audio对象
var Music = document.getElementById("audio");
//当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。

然后我们来看下api所提供的对audio标签操作的一些属性和方法

属性：

那么来看下这边常用的控制用的函数：

OK~那么我们来看下关于audio标签API中的常用事件。

首先绑定事件的话可以通过js中的addEventListener方法来绑定事件。

Music.addEventListener(string:事件类型/名称,function:具体事件促发时的执行,boolean:是否使用捕捉,默认为false);
/*
    参数说明，来自百度百科
    1、type:String
　　事件的类型。
　　2、listener:Function
　　侦听到事件后处理事件的函数。 此函数必须接受 Event 对象作为其唯一的参数，并且不能返回任何结果，如以下示例所示： 访问修饰符 function 函数名(evt:Event):void
　　3、useCapture:Boolean (default = false)
　　这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。
*/

常用audio的事件：

OK基本上api的常用的内容就那么多。其实video的api和audio几乎一致。稍稍有点不同。所以基本上会了一个其他的也就都会了。具体的一些的使用方法请参考前两天写的那篇文章中的代码