html5课堂笔记,【HTML5】HTML5 Audio(音频)[课堂笔记]

胡小哥课堂笔记

整理了下昨天学习的H5的一个新东东，做了一个很简易的音频播放器。

HTML5 提供了播放音频文件的标准。

controls ：为视频提供播放控件

autoplay :自动播放

通过使用HTML5中的audio功能，我们可以实现与flash相同的功能，即循环，随机，跳转等功能。

如下图：

浏览器不支持audio元素。

顺序播放

随机播放

var arr = ["sources/aaa.mp3","sources/bbb.mp3","sources/ccc.mp3"]//申明一个数组将音频路径放进去

var playtype;//播放状态

var index = 0;//下标

window.onload = function(){//页面加载完成后执行事件

var sele = document.getElementById("sele");//获取节点对象

sele.onchange = function(){//事件会在域的内容改变时执行

playtype=sele.value;//获取播放状态

};

var ad = document.getElementById("ad");//获取播放器对象

ad.src=arr[index];//音频路径等于arr下标索引的值

ad.onended = function(){//当音频播放结束时执行

//随机播放

if (playtype=="随机播放") {//判断状态是否等于"随机播放"

index=Math.floor(Math.random()*arr.length);//下标值等于随机数*arr数组的长度

ad.src=arr[index];//音频播放路径等于arr数组里的下标的值

}

//顺序播放

else{

index++;//每次下标+1

ad.src=arr[index];//音频路径等于arr下标索引的值

if (index==arr.length-1) {//当下标大于数组空间长度时

index=-1;//下标-1

}

}

ad.play();//音频播放

};

};

——来自胡小哥课堂笔记