关于html5的炒作已经有一段时间了,小弟亦是个跟风之人,对该新鲜事物也充满好奇和期待。本文为该系列(html5尝鲜)第一节,先以一个简单的demo开胃,希望能勾起各位同学对html5的兴趣和关注。
html5里有一个新标签audio,该标签用以定义声音,比如音乐或其他音频流。
既然audio标签可以播放音频,那我们可以不再使用flash、wmp等其他任何第三方,轻而易举的使用纯html来打造一个音乐播放器。
例子:
或
下面是小弟用audio做的一个音乐播放器的界面,先睹为快:
audio 有几个属性:
src:string型,所播放音频的 url。
autoplay:bool型,如果是 true,则音频在就绪后马上播放。默认为false。
controls:bool型,如果是 true,则向用户显示控件,比如播放按钮。默认为false。
更多详细属性:">http://www.w3school.com.cn/html5/html5_audio.asp
audio 有几个事件:
onended:当媒介已抵达结尾时运行脚本,也就是当前歌曲播放完了,这里的“媒介”是指audio标签。
onloadstart:当开始加载媒介数据时运行脚本。
onplay:当媒介数据将要开始播放时运行脚本。这里的“媒介数据”是指播放的文件。
onplaying:当媒介数据已开始播放时运行脚本。
onpause:当媒介数据暂停时运行脚本。
onerror:当加载媒介数据出错时运行的脚本。(w3school不是这样解释的)
更多详细事件:http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp#media_events
打造该播放器的完整代码如下:
html
无标题页body
{ font-size:13px;
font-family:宋体;
}
#ul_musiclist
{
width:300px;
list-style-type:none;
margin:5px 0 3px 0;
padding:0px;
}
#ul_musiclist li
{
padding:5px;
border:solid 1px #eeeeee;
}
var mb=null;
$().ready(function(){
mb=new musicbox();
mb.init();
});
οnended="mb.nextmusic()"
οnlοadstart="mb.loadstart()"
οnplaying="mb.playing()"
οnpause="mb.pausepaly()"
οnerrοr="mb.loaderror()"
>
歌曲列表:
播放模式:
全部循环
单曲循环
musicbox.js
musicbox=function (){
var _this=this;
var media= document.getelementbyid("musicbox");
var musicfiles=[
{name:"犯错",url:""} ,
{name:"天使的翅膀",url:""},
{name:"无名轻音乐",url:"http://audio.ngfiles.com/88000/88260_zanarkan_mastered_piano_ve.mp3"},
{name:"草泥马之歌",url:"错误的资源
{name:"相思风雨中",url:""}
];
//当前正在播放的歌曲的索引
var index=-1;
//当前正在播放的歌曲
var playingfile=null;
//播放模式
var playmode=1;
//下一首
this.nextmusic=function(){
if(playmode=="1"){
index+=1;
}
if(index==musicfiles.length){
index=0;
}
playingfile=musicfiles[index];
media.setattribute("src",playingfile.url);
media.play();
$("#ul_musiclist").children().css({"background-color":"#fff","border":"solid 1px #eeeeee","color":"#000"});
$( $("#ul_musiclist").children()[index]).css({"background-color":"#2c7de2","border":"solid 1px #206ddf","color":"#fff"});
}
//加载
this. loadstart=function(){
$("#sn_status").text("加载中....");
}
//播放
this. playing=function(){
$("#sn_status").text("当前正在播放:"+playingfile.name);
}
//暂停
this. pausepaly=function(){
$("#sn_status").text("暂停:"+playingfile.name);
}
//加载出错
this. loaderror=function(){
$("#sn_status").text("加载“"+playingfile.name+"”失败,可能资源不存在~");
}
//初始化
this.init=function(){
for(var a in musicfiles){
$("#ul_musiclist").append("
"+musicfiles[a].name+"");}
_this.nextmusic();
$("#slt_playmode").change(function(){
playmode=$("#slt_playmode").val();
});
}
}
如果您能在下面看到播放器并听到背景音乐,那说明您当前使用的浏览器支持html5 。
示例下载(建议使用 google chrome测试)
作者 祥叔