zoukankan      html  css  js  c++  java
  • 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=" 720px; height: 420px; margin: 0px;" onload="mplay(0)" oncontextmenu="return false;" >
        <div style=" 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=" 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; 480; background-color: #000000;
                        float: left;">
                        <table border="0" cellspacing="0" cellpadding="0" width="480px" id="lrcoll" style="position: relative;
                            top: -18px; left: 0px;" oncontextmenu="return false;">
                            <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; 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; 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; 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" onchange="mplay(this.selectedIndex)"
                    style=" 100%; height: 325px; text-align: left;">
                    <%=getmlist() %>
                </select><input id="btn_bace" type="button" value="·上一首·" onclick="mPback()" style=" 105px" />
                <input id="btn_next" type="button" value="·下一首·" onclick="mPnext()"  style=" 105px" /><input id="Button2" type="button" value="·下载歌曲·" onclick="downmusic()" style=" 105px"  />
                <input id="Button1" type="button" value="·复制歌词·" onclick="copyToClipboard()" style=" 105px"/>
            </div>
            <%--歌词控制开始--%>
        </div>

        <script language="JavaScript" type="text/javascript">
    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.onerror = function()
    {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.data = copytext;  
          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.Data;
    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;
        }
    }

    做人中庸不平庸,做事到位不越位
  • 相关阅读:
    游戏研发流程与构成要素
    Unity获取游戏对象详解
    Unity3D一些基本的概念和一些基本操作
    2019年Unity3D游戏开发前景预测及总结
    Unity3d游戏代码保护
    spring boot快速入门 6: 表单验证
    spring boot快速入门 5: 事务管理
    spring boot快速入门 4: jpa数据库操作 实现增删改查
    spring boot快速入门 3: controller的使用
    spring boot快速入门 2 :属性配置
  • 原文地址:https://www.cnblogs.com/Alum/p/3587991.html
Copyright © 2011-2022 走看看