胡小哥课堂笔记
整理了下昨天学习的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();//音频播放
};
};
——来自胡小哥课堂笔记