C#+JS实现全能.net网页音乐播放器
1、前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="music_play.aspx.cs" Inherits="music_play" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<
meta http-equiv="Content-Type content=text/html; charset=gb2312" content="" />
<title>歌词在线同步功能,在线同步音乐,歌词同步</title>
<style type="text/css">
#lrcollbox td, #lrcollbox font {font-family: 黑体;
font-size: 16px;}
#lrcoll td { color:#0080C0; cursor: default; }
#lrcbox { color:#00FF00 }
#lrcfilter { filter: alpha(opacity=0) }
#lrcbc { color:#FFFF33 }
</style>
</head>
<body style="width: 720px; height: 420px; margin: 0px;" on
<div style="width: 720px; float: left; text-align: center; border: #cccccc solid;">
<label style="font-size: 20px; color: Blue; font-weight: bolder; font-family:楷体_GB2312;">
中国方位在线网页音乐播放器</label>
<div style="width: 480px; float: left; border: #cccccc thin double;">
<%--播放音乐部分开始--%>
<span id="lrcdata"></span><span id="lbl_lrc">
<%=getlrc() %>
</span>
<center>
<div id="lrcollbox" style="overflow: hidden; height: 328; width: 480; background-color: #000000;
float: left;">
<table border="0" cellspacing="0" cellpadding="0" width="480px" id="lrcoll" style="position: relative;
top: -18px; left: 0px;" on
<tr>
<td height="20" align="center" id="lrcwt1">
</td>
</tr>
<tr>
<td height="20" align="center" id="lrcwt2">
</td>
</tr>
<tr>
<td height="20" align="center" id="lrcwt3">
</td>
</tr>
<tr>
<td height="20" align="center" id="lrcwt4">
</td>
</tr>
<tr>
<td height="20" align="center" id="lrcwt5">
</td>
</tr>
<tr>
<td height="20" align="center" id="lrcwt6">
</td>
</tr>
<tr>
<td height="20" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap height="20">
<span id="lrcwt7" style="height: 20"></span>
</td>
</tr>
<tr style="position: relative; top: -20px; z-index: 6">
<td nowrap height="20">
<div id="lrcfilter" style="overflow: hidden; width: 100%; color: #FFFF33; height: 20">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr style="position: relative; top: -20px">
<td nowrap height="20" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td nowrap height="20">
<span id="lrcbox" style="height: 20">歌词加载中</span></td>
</tr>
<tr style="position: relative; top: -20px; z-index: 6;">
<td nowrap height="20">
<div id="lrcbc" style="overflow: hidden; height: 20; width: 0;">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr style="position: relative; top: -40px;">
<td nowrap height="20" align="center" id="lrcwt8">
</td>
</tr>
<tr style="position: relative; top: -40px;">
<td nowrap align="center" id="lrcwt9" style="height: 20px">
</td>
</tr>
<tr style="position: relative; top: -40px;">
<td nowrap height="20" align="center" id="lrcwt10">
</td>
</tr>
<tr style="position: relative; top: -40px;">
<td nowrap height="20" align="center" id="lrcwt11">
</td>
</tr>
<tr style="position: relative; top: -40px;">
<td nowrap height="20" align="center" id="lrcwt12">
</td>
</tr>
<tr style="position: relative; top: -40px;">
<td nowrap height="20" align="center" id="lrcwt13">
</td>
</tr>
</table>
</div>
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480"
height="62">
<param name="url" value="" />
<param name="volume" value="100" />
<param name="enablecontextmenu" value="0" />
<param name="enableerrordialogs" value="0" />
</object>
</center>
</div>
<div style="float: right; width: 220px; text-align: center;border: #cccccc thin double;">
<asp:Label ID="Label1" runat="server" Text="播放列表" Width="100%" BackColor="Silver"
ForeColor="Black"></asp:Label>
<select id="playselect" dir="ltr" multiple="multiple" on
style="width: 100%; height: 325px; text-align: left;">
<%=getmlist() %>
</select><input id="btn_bace" type="button" value="·上一首·" on
<input id="btn_next" type="button" value="·下一首·" on
<input id="Button1" type="button" value="·复制歌词·" on
</div>
<%--歌词控制开始--%>
</div>
<script language="JavaS
var lrc0;
var lrc1;
var min;
function lrcClass(tt)
{
this.inr = [];
this.min = [];
this.oTime = 0;
this.dts = -1;
this.dte = -1;
this.dlt = -1;
this.ddh;
this.fjh;
lrcbc.style.width = 0;
if(/\[offset\:(\-?\d+)\]/i.test(tt))
this.oTime = RegExp.$1/1000;
tt = tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1");
tt = tt.replace(/\[[^\[\]\:]*\]/g,"");
tt = tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,"");
tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,"");
tt = tt.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,"");
tt = tt.replace(/<[^<>]*\:[^<>]*[^<>\d\.]+[^<>]*>/g,"");
while(/\[[^\[\]]+\:[^\[\]]+\]/.test(tt))
{
tt = tt.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n");
var zzzt = RegExp.$1;
/^(.+\])([^\]]*)$/.exec(zzzt);
var ltxt = RegExp.$2;
var eft = RegExp.$1.slice(1,-1).split("][");
for(var ii=0; ii<eft.length; ii++)
{
var sf = eft[ii].split(":");
var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]);
var sso = { t:[] , w:[] , n:ltxt }
sso.t[0] = tse-this.oTime;
this.inr[this.inr.length] = sso;
}
}
this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} );
for(var ii=0; ii<this.inr.length; ii++)
{
while(/<[^<>]+\:[^<>]+>/.test(this.inr[ii].n))
{
this.inr[ii].n = this.inr[ii].n.replace(/<(\d+)\:([\d\.]+)>/,"%=%");
var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2);
this.inr[ii].t[this.inr[ii].t.length] = tse-this.oTime;
}
lrcbc.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +"</font>";
var fall = lrcbc.getElementsByTagName("font");
for(var wi=0; wi<fall.length; wi++)
this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;
this.inr[ii].n = lrcbc.innerText;
}
for(var ii=0; ii<this.inr.length-1; ii++)
this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10);
this.min.sort(function(a,b){return a-b});
min = this.min[0]/2;
this.run = function(tme)
{
if(tme<this.dts || tme>=this.dte)
{
var ii;
for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}
if(ii<0) return;
this.ddh = this.inr[ii].t;
this.fjh = this.inr[ii].w;
this.dts = this.inr[ii].t[0];
this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration;
lrcwt1.innerText = this.retxt(ii-7);
lrcwt2.innerText = this.retxt(ii-6);
lrcwt3.innerText = this.retxt(ii-5);
lrcwt4.innerText = this.retxt(ii-4);
lrcwt5.innerText = this.retxt(ii-3);
lrcwt6.innerText = this.retxt(ii-2);
lrcwt7.innerText = this.retxt(ii-1);
lrcfilter.innerText = this.retxt(ii-1);
lrcwt8.innerText = this.retxt(ii+1);
lrcwt9.innerText = this.retxt(ii+2);
lrcwt10.innerText = this.retxt(ii+3);
lrcwt11.innerText = this.retxt(ii+4);
lrcwt12.innerText = this.retxt(ii+5);
lrcwt13.innerText = this.retxt(ii+6);
this.print(this.retxt(ii));
if(this.dlt==ii-1)
{
clearTimeout(lrc0);
if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0;
golrcoll(0);
clearTimeout(lrc1);
lrcfilter.filters.alpha.opacity = 100;
golrcolor(0);
}
else if(parseInt(lrcoll.style.top)!=-20)
{
clearTimeout(lrc0);
lrcoll.style.top = -20;
clearTimeout(lrc1);
lrcfilter.filters.alpha.opacity = 0;
}
this.dlt = ii;
}
var bbw = 0;
var ki;
for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++)
bbw += this.fjh[ki];
var kt = ki-1;
var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt];
var tc = tme - this.ddh[kt];
bbw -= this.fjh[kt] - tc / sc * this.fjh[kt];
if(bbw>lrcbox.offsetWidth)
bbw = lrcbox.offsetWidth;
lrcbc.style.width = Math.round(bbw);
}
this.retxt = function(i)
{
return (i<0 || i>=this.inr.length)?"":this.inr[i].n;
}
this.print = function(txt)
{
lrcbox.innerText = txt;
lrcbc.innerText = txt;
}
// this.print("寒川");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcwt6.innerText = "";
lrcwt7.innerText = "";
lrcfilter.innerText = "";
lrcwt8.innerText = "";
lrcwt9.innerText = "";
lrcwt10.innerText = "";
lrcwt11.innerText = "";
lrcwt12.innerText = "";
lrcwt13.innerText = "";
}
function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition);
}
if(arguments.length==0) setTimeout("lrcrun()",10);
}
function golrcoll(s)
{
lrcoll.style.top = -(s++)*2;
if(s<=9)
lrc0 = setTimeout("golrcoll("+s+")",min*10);
}
function golrcolor(t)
{
lrcfilter.filters.alpha.opacity = 110-(t++)*10;
if(t<=10)
lrc1 = setTimeout("golrcolor("+t+")",min*10);
}
window.on
{return true;}
//播放器控制
var mindex=0;
var musicstr='<%=getPath() %>';//音乐列表路径
var m_list=musicstr.split('&');
var lrc_list=lbl_lrc.innerHTML.slice(4,-3).split('*');
//顺序播放列表
var t=setInterval("playlist()",1000);
function playlist(){
if(aboutplayer.playState==1){
if(mindex==m_list.length-1){
mindex=0;
}else{
mindex=mindex+1;
}
mplay(mindex);
}
}
// 播放
function mplay(num){
showlrc(num);
aboutplayer.URL = m_list[num];
aboutplayer.controls.play();
}
// 下一曲
function mPnext(){
if(mindex==m_list.length-1){
mindex=0;
}else{
mindex=mindex+1;
}
showlrc(mindex);
aboutplayer.URL = m_list[mindex];
aboutplayer.controls.play();
}
// 上一曲
function mPback(){
if(mindex==0){
mindex=m_list.length-1;
}else{
mindex=mindex-1;
}
showlrc(mindex);
aboutplayer.URL = m_list[mindex];
aboutplayer.controls.play();
}
//显示歌词
function showlrc(mindex){
window.document.title="正在播放："+playselect.options[mindex].text;
lrcobj = new lrcClass(lrc_list[mindex]);
playselect.selectedIndex=mindex;
lrcrun();
}
//下载歌曲
function downmusic(){
window.open(m_list[mindex]);
}
//JS复制文本到剪切板
function copyToClipboard() {
var txt=lrc_list[mindex];
if(window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
alert("复制成功，感谢你对情趣天涯音乐上线系统的支持！\n请将歌词保存为*.lrc文件即可与音乐文件绑定播放！");
}
else if(navigator.userAgent.indexOf("Opera") != -1) {
window.location = txt;
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将'signed.applets.codebase_principal_support'设置为'true'");
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip)
return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans)
return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = txt;
str.da
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip)
return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
alert("复制成功，感谢你对情趣天涯音乐上线系统的支持！");
}
}
</script>
<%--播放器控制结束--%>
</body>
</html>
2、后台代码
using System;
using System.Da
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class music_play : System.Web.UI.Page
{
/// <summary>
/// 下面是调用页面使用的代码
/// 参数：m_id为音乐编号！多个编号可用‘-’分隔
/// Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), "message", "<script>window.open('网址?mid=" + m_id + "','newwindow','height=410, width=730, top=200,left=200 toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');</script>");
/// </summary>
string m_list = "";//歌曲列表字符串
string m_lrc = "";//歌词列表字符串
ArrayList p_list = new ArrayList();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
try
{
#region 将选择歌曲写入播放列表
Maticsoft.BLL.music_list ml_bll = new Maticsoft.BLL.music_list();
Maticsoft.Model.music_list ml_model = new Maticsoft.Model.music_list();
string m_id = Request["mid"].ToString();//用户请求播放的音乐编号多个用‘-’分开
if (m_id.Length > 0)
{
if (m_id.Contains("_"))
{
string[] mid = m_id.Split('_');
for (int i = 0; i < mid.Length; i++)
{
ml_model = ml_bll.GetModelList("m_id=" + Int32.Parse(mid[i]))[0];
m_list = m_list + ml_model.m_path.Substring(2) + "&";
m_lrc = m_lrc + ml_model.m_songwords + "*";
//lrc_list.Add(ml_model.m_songwords.Replace("/"));
p_list.Add(ml_model.m_name);
}
m_list = m_list.Substring(0, m_list.LastIndexOf("&"));
m_lrc = m_lrc.Substring(0, m_lrc.LastIndexOf("*"));
}
else
{
ml_model = ml_bll.GetModelList("m_id=" + Int32.Parse(m_id))[0];
m_list = m_list + ml_model.m_path.Substring(2);
m_lrc = m_lrc + ml_model.m_songwords;
p_list.Add(ml_model.m_name);
}
}
#endregion
}
catch (Exception ex)
{
#region 播放当前指定的歌曲
#endregion
}
}
}
public string getPath()
{
return m_list;
}
protected string getlrc()
{
return "<!--" + m_lrc + "-->";
}
protected string getmlist()
{
string strl = "";
for (int i = 0; i < p_list.Count; i++)
{
strl = strl + "<option>" + p_list[i] + "</option>";
}
return strl;
}
}
