html5 player3

最新推荐文章于 2021-07-23 14:01:47 发布

bonlog

最新推荐文章于 2021-07-23 14:01:47 发布

阅读量905

点赞数

分类专栏： javascript+html5+前台美工

本文链接：https://blog.csdn.net/bonlog/article/details/21283723

版权

javascript+html5+前台美工专栏收录该内容

36 篇文章 0 订阅

订阅专栏

　　<!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();

　　});

　　}

　　}