asp.net 实现LRC歌词播放

这个其实很简单，此功能包含一个asp.net UserControl和asp.net引用页面。

LRCPlayer.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LRCPlayer.ascx.cs" Inherits="UserControls_LRCPlayer" %>
<div style="<%#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>

LRCPlayer.ascx.cs

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

lrc.aspx

<%@ 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>

lrc.aspx.cs

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);
    }
}