html5开发一个音乐播放器,HTML5开发学习（1）：使用aduio标签打造音乐播放器

关于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测试)

作者  祥叔