用jplayer2.0还比较好用~
实例:
link href="skin/cssreset.css" rel="stylesheet" type="text/css" />
<link href="skin/default/css/default.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.playlist_content_songer .imgDiv a span { behavior: url(skin/default/css/iepngfix.htc); cursor: pointer; }
#player_play{behavior: url(skin/default/css/iepngfix.htc); }
#player_pause{behavior: url(skin/default/css/iepngfix.htc); }
</style>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" language="javascript">
function gechi(musicname)
{
$.ajax({
type:"post",//提交方式
url:"ajaxval.aspx", //提交地址
data: "name="+musicname,//提交的数据
success:function(msg){//根据返回状态,给出相关提示
if (msg!=null) {
$("#<%=Label1.ClientID%>").html(msg); }
// else
// $("#<%=Label1.ClientID%>").text("获取不到歌词");}
// $("#Label1").val="获取不到歌词";
}
});
}
</script>
<div>
<div style="float:left; width:263px; text-align:center; height:410px;overflow:scroll" >
<div style="width:240px; text-align:center">
<asp:Label ID="Label1" runat="server" Text="歌词"></asp:Label>
</div>
</div>
<div id="container" style="float:right; margin-top:3px; margin-bottom:3px" >
<div id="jquery_jplayer"></div>
<div id="player_title">
<h1>音乐盒</h1>
</div>
<div id="playlist_list">
<div class="playlist_main">
<div class="playlist_wrap" >
<div class="playlist_cc">
<ul class="playlist_content" >
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<li onclick='gechi("<%# Eval("musicname")%>")' class="player" jplayer='<%# Eval("musicpath") %>' songer="许慧欣" ablum="幸福的糖" songimg="skin/default/images/songer/1.jpg">
<a href="#" class="controllink" ></a>
<p ><%# Eval("musicname")%></p>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
</div>
<div class="playlist_footer_content">
<ul class="playlist_footer">
<li class="list_play_zhi"><a href="#">直接播放</a></li>
<li class="list_up_one"><a href="#">上一首</a></li>
<li class="list_up" style="display:none;"><a href="#">上 翻</a></li>
<li class="list_down" style="display:none;"><a href="#">下 翻</a></li>
<li class="list_down_one"><a href="#">下一首</a></li>
<li class="list_ramdom"><a href="#">随便听听</a></li>
</ul>
</div>
</div>
</div>
<br />
</div>