html5 player3

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">

  <title>无标题页</title>

  <style type="text/css">

  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;}

  </style>

  <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

  <script src="Scripts/MusicBox.js" type="text/javascript"></script>

  <script type="text/javascript">

  var mb=null;

  ().ready(function(){

  mb=new MusicBox();

  mb.init();

  });

  </script>

  </head>

  <body >

  <div>

  <audio id="musicBox" controls="true"

  οnended="mb.nextMusic()"

  οnlοadstart="mb.loadStart()"

  οnplaying="mb.playing()"

  οnpause="mb.pausePaly()"

  οnerrοr="mb.loadError()"

  >

  </audio>

  <br /> <input id="btnNext" type="button" value="下一首" οnclick="javascript:mb.nextMusic()" />

  <span id="sn_status"></span><br />

  <div style=" margin-top:5px">歌曲列表:</div>

  <ul id="ul_musicList" >

  </ul>

  <div style="width:300px; text-align:right">

  播放模式:<select id="slt_playMode">

  <option value="1">全部循环</option>

  <option value="2">单曲循环</option>

  </select>

  </div>

  </div>

  </body>

  </html>

  MusicBox.js

  MusicBox=function (){

  var _this=this;

  var media= document.getElementById("musicBox");

  var mucicFiles=[

  {name:"犯错",url:"#"} ,

  {name:"天使的翅膀",url:"#"},

  {name:"无名轻音乐",url:"#"},

  {name:"草泥马之歌",url:"#"},//错误的资源

  {name:"相思风雨中",url:"#"}

  ];

  //当前正在播放的歌曲的索引

  var index=-1;

  //当前正在播放的歌曲

  var playingFile=null;

  //播放模式

  var playMode=1;

  //下一首

  this.nextMusic=function(){

  if(playMode=="1"){

  index+=1;

  }

  if(index==mucicFiles.length){

  index=0;

  }

  playingFile=mucicFiles[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 mucicFiles){

  ("#ul_musicList").append("<li>"+mucicFiles[a].name+"</li>");

  }

  _this.nextMusic();

  ("#slt_playMode").change(function(){

  playMode=("#slt_playMode").val();

  });

  }

  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值