asp.net 实现LRC歌词播放

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LRCPlayer.ascx.cs" Inherits="UserControls_LRCPlayer" %>
<div style="width:<%#Width%>;height:<%#Height%>;border:1px solid gray;overflow:auto;">
<asp:Repeater runat="server" ID="rptLRC">
<HeaderTemplate>
<div>歌曲:<%#this.TI %></div>
<div>演唱:<%#this.AR %></div>
<ul style="list-style-type:none;">
</HeaderTemplate>
<ItemTemplate>
<li id="<%#this.rptLRC.ClientID %>_<%#Eval("Key") %>"><%#Eval("Value") %></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</div>
<script type="text/javascript">
function <%=this.rptLRC.ClientID %>_Play()
{
var <%=this.rptLRC.ClientID %>_preFix = "<%=this.rptLRC.ClientID %>_";
var <%=this.rptLRC.ClientID %>_keys = new Array();
<%
for (var i = 0; i < this.LRCList.Count; i++)
{
%>
<%=this.rptLRC.ClientID %>_keys[<%=i %>] = <%=this.LRCList[i].Key %>;
<%
}
%>
var startTime = new Date().getTime();
var handle = setInterval(function()
{
var currentTime = new Date().getTime();
var offsetTime = currentTime - startTime;

var flag = false;
for(var i = 0; i < <%=this.rptLRC.ClientID %>_keys.length; i++)
{
var id = <%=this.rptLRC.ClientID %>_preFix + <%=this.rptLRC.ClientID %>_keys[i];
var lastVisibleIndex = i + 3;
if(lastVisibleIndex > <%=this.rptLRC.ClientID %>_keys.length - 1)
{
lastVisibleIndex = <%=this.rptLRC.ClientID %>_keys.length - 1;
}
var lastVisibleElementID = <%=this.rptLRC.ClientID %>_preFix + <%=this.rptLRC.ClientID %>_keys[lastVisibleIndex];

if(!flag)
{
if(offsetTime < <%=this.rptLRC.ClientID %>_keys[i])
{
flag = true;
document.getElementById(id).style.color = "red";
document.getElementById(lastVisibleElementID).scrollIntoView(false);
}
else
{
document.getElementById(id).style.color = "black";
}
}
else
{
document.getElementById(id).style.color = "black";
}
}
},100);
}

<%=this.rptLRC.ClientID %>_Play();
</script>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text.RegularExpressions;
using System.Diagnostics;

public partial class UserControls_LRCPlayer : System.Web.UI.UserControl
{
private string LRC { get; set; }
public string Width { get; set; }
public string Height { get; set; }
public bool AutoPlay { get; set; }
public string TI { get; set; }
public string AR { get; set; }
public string AL { get; set; }
public List<KeyValuePair<int, string>> LRCList { get; set; }

public void LoadLRC(string lrc)
{
this.LRCList = new List<KeyValuePair<int, string>>();
var items = lrc.Split(new string[] { "\r\n" }, StringSplitOptions.None);
foreach (var line in items)
{
var regTI = new Regex(@"\[ti\:.{0,}\]", RegexOptions.IgnoreCase);
var regAR = new Regex(@"\[ar\:.{0,}\]");
var regAL = new Regex(@"\[al\:.{0,}\]");
var regContent = new Regex(@"(\[\d{2}\:\d{2}(\.\d{2,}){0,}\])+.+");
if (regTI.IsMatch(line))
{
this.TI = line.Substring(4, line.Length - 5);
continue;
}
else if (regAR.IsMatch(line))
{
this.AR = line.Substring(4, line.Length - 5);
continue;
}
else if (regAL.IsMatch(line))
{
this.AL = line.Substring(4, line.Length - 5);
continue;
}
else if (regContent.IsMatch(line))
{
var regTime = new Regex(@"\[\d{2}\:\d{2}(\.\d{2,}){0,}\]");
var regText = new Regex(@"");
var matches = regTime.Matches(line);
foreach (Match match in matches)
{
int timer = 0;
var time = match.Value.Substring(1, match.Value.Length - 2).Split(new char[] { ':', '.' });
if (time.Length > 0)
timer += int.Parse(time[0]) * 60 *1000;
if (time.Length > 1)
timer += int.Parse(time[1]) * 1000;
if (time.Length > 2)
timer += int.Parse(time[2]);

var lastMatch = matches[matches.Count - 1];
var text = line.Substring(lastMatch.Index + lastMatch.Length);
this.LRCList.Add(new KeyValuePair<int, string>(timer, text));
}
continue;
}
}
this.LRCList = this.LRCList.OrderBy(item => item.Key).ToList();
rptLRC.DataSource = this.LRCList;
rptLRC.DataBind();
}

protected void Page_Load(object sender, EventArgs e)
{
if (string.IsNullOrWhiteSpace(this.Width))
this.Width = "auto";
if (string.IsNullOrWhiteSpace(this.Height))
this.Height = "auto";
this.DataBind();
}
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="lrc.aspx.cs" Inherits="lrc" %>

<%@ Register src="UserControls/LRCPlayer.ascx" tagname="LRCPlayer" tagprefix="uc1" %>

<!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>
</head>
<body>
<form id="form1" runat="server">
<table cellpadding="10px">
<tr>
<td><uc1:LRCPlayer ID="LRCPlayer1" runat="server" Width="400px" Height="500px" /></td>
<td><uc1:LRCPlayer ID="LRCPlayer2" runat="server" Width="400px" Height="500px" /></td>
</tr>
</table>
</form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Text;

public partial class lrc : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var path = Server.MapPath("./lrc/俩俩相忘.lrc");
var a = new System.IO.StreamReader(path, Encoding.Default);
var lrc = a.ReadToEnd();
LRCPlayer1.LoadLRC(lrc);

path = Server.MapPath("./lrc/难念的经.lrc");
a = new System.IO.StreamReader(path, Encoding.Default);
lrc = a.ReadToEnd();
LRCPlayer2.LoadLRC(lrc);
}
}