html5写的music播放器

最新推荐文章于 2024-05-31 22:20:16 发布

Yuxang

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量456

点赞数

分类专栏： IT前沿文章标签： html5 list function border xml audio

IT前沿专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<title>music</title>
<script type="text/javascript" src="http://10.144.214.53/jquery_lib/jquery-1.4.4.js"></script>
<script type="text/javascript">
var music_list=localStorage.music_list;
var music_index=localStorage.music_index;
var list;
$(document).ready(function(){
//if(music_list==undefined){
music_index=0;
getDate();
//}
play();
});
function getDate(){
music_list="";
$.ajax({
type: "GET",
url: "http://10.144.214.53/music/list.xml",
async:false,
success:function(xml){
var items=$(xml).find("item");
for(var i=0;i<$(items).size();i++){
music_list=music_list+$(items[i]).text();
if(i!=items.length-1){
music_list=music_list+";";
}
}
localStorage.music_list=music_list;
//alert(music_list)
}
});
list=music_list.split(";");
initList();
}
function play(){
$("#song_name").html(list[music_index].split(".")[0]);
document.getElementById(music_index).style.background="green";
$("#audio").attr("src",list[music_index]);
}
function change(flag){
document.getElementById(music_index).style.background="";
music_index=parseInt(music_index)+parseInt(flag);
if(music_index<0){
music_index=list.length;
}else if(music_index>list.length-1){
music_index=0;
}
play();
}
function initList(){
for(var i=0;i<list.length;i++){
$("<li>",{id: i, text: list[i].split(".")[0],css:{border:"1px double gray",cursor:"default"},
click: function(){document.getElementById(music_index).style.background="";music_index=this.id;play();},mouseover:function(){if(this.style.background!=="green")this.style.background="blue";},mouseout:function(){if(this.style.background!=="green")this.style.background="";}}).appendTo("#song_list");
}
}
</script>
</head>
<body style="background: url('beijing.jpg') no-repeat">
<div style="margin-top:50px">
<table align="center" width="400px;" border="2" bgcolor="#cccccc" background="music1.png">
<tr>
<td><audio id="audio" src="" style="width:100%" autobuffer="true" controls="controls" autoplay="autoplay" οnended="change(1)"/>
</td>
</tr>
<tr>
<td height="45px" style="font:25px 隶书;color:#FF0900;">
当前播放:<marquee direction="left"><span id="song_name"></span></marquee>
</td>
</tr>
<tr>
<td><button οnclick="change(-1)">上一首</button><button οnclick="change(1)">下一首</button><button οnclick="getDate()">刷新列表</button>
</td>
</tr>
<tr>
<td><div id="song_list" style="width:98%;height:300px;overflow-y:scroll;border:3px double #eeffee;font:16px 隶书"></div></td>
</tr>
</table>
</div>
</body>
</html>

Yuxang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5写的music播放器

musicvar music_list=localStorage.music_list;var music_index=localStorage.music_index;var list;$(document).ready(function(){//i
复制链接

扫一扫