網站是否有播放音樂功能

以前開發的一個網站，昨晚吃晚飯時，客戶來電說，網站是否有播放音樂功能，可更換樂曲，可控音量與停放。
當時一心品嘗美味晚餐，當時隨口回答客戶一切沒有問題。

晚餐完畢，開始工作......
第一步，考慮到方便用戶管理歌曲需求，如果只播放一首歌是很方便的，讓用戶替換歌曲即可。但也許用戶需要播放回以前的歌曲，不必重復上傳與替換。因此想到要實現存儲用戶播放的歌曲，如果用戶要播放新歌曲，上傳即可，如果想播放回以前的歌曲，重新選擇即可。

現在用戶要求是每次播放一首。想到某一天，用戶會心血來潮，要能循環播放幾首，這在開發時，就要想到的。
OK，把想到的一切可變因數，在開發時，需要考慮進來。
數據庫創建一個表:

CREATE TABLE [dbo].[Music]
(
    [Music_nbr] INT IDENTITY(1,1) PRIMARY KEY NOT NULL,
    [Org_FileName] NVARCHAR(128) NOT NULL,
    [FileName] NVARCHAR(128) NOT NULL,
    [IsPlay] BIT NOT NULL DEFAULT(1),
    [PalyUpdateDate] DATETIME NOT NULL DEFAULT(CURRENT_TIMESTAMP)
 )

 GO

主鍵自動增長值。
[Org_FileName] 字段存儲歌曲原文件名，在后台管理音樂列表時，看到原文件名。
[FileName] 是存儲Guid產生的文件名，將存於站點的目錄之下，這樣可解決文件在上傳時，避免文件名重復。
[IsPlay] 是bit存儲值，0與1之間選擇，1為選擇播放的歌曲。
[PalyUpdateDate] 這個字段為重點字段，可供用戶更新此字段時間，此時間將是歌曲列表作排序。

下面Insus.NET提供一些相關的存儲過程(部分)：
創建一個存儲過程，讓客戶添加歌曲：



寫兩個更新的存儲過程，可以讓客戶從新上傳歌曲文件。另一個更新的存儲過程，是客戶點選擇上傳的歌曲來播放，點播放時，更新兩個字段[IsPlay]和[PalyUpdateDate]，如果客戶點取消播放歌曲，那只更新[IsPlay]字段即可。



創建兩個獲取歌曲存儲過程，第一個是獲取所有歌曲記錄，讓客戶能在后台管理到它們。另外是為網站所使用，就是獲取可以播放的歌曲列表。看到粉紅高亮代碼否？這個參數是從另外一個表獲取。站點還有另外一個表[dbo].[SystemParameter]是用來存儲站點所有參數。當然客戶在后台可管理這些參數信息的。



最后創建一個存儲過程，是讓客戶能在后台能刪除這個歌曲。

 

應該還有很多存儲過程的，Insus.NET在此省略......
OK，數據庫層開發完畢，轉至程序開發，創建一個Music對象：

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;

/// <summary>
/// Summary description for Music
/// </summary>
namespace Insus.NET
{
    public class Music
    {
        private int? _Music_nbr;
        private string _Org_FileName;
        private string _FileName;
        private bool _IsPlay;
        private DateTime? _PlayUpdateDate;
        private bool _IsMultiPlay;

        public int? Music_nbr
        {
            get { return _Music_nbr; }
            set { _Music_nbr = value; }
        }
        public string Org_FileName
        {
            get { return _Org_FileName; }
            set { _Org_FileName = value; }
        }
        public string FileName
        {
            get { return _FileName; }
            set { _FileName = value; }
        }
        public bool IsPlay
        {
            get { return _IsPlay; }
            set { _IsPlay = value; }
        }
        public DateTime? PlayUpdateDate
        {
            get { return _PlayUpdateDate; }
            set { _PlayUpdateDate = value; }
        }
        public bool IsMultiPlay
        {
            get { return _IsMultiPlay; }
            set { _IsMultiPlay = value; }
        }

        //http://
        BusinessBase objBusinessBase = new BusinessBase();

        public Music()
        {
            //
            // TODO: Add constructor logic here
            //
        }

        public DataTable GetAll()
        {
            return objBusinessBase.GetDataToDataSet("usp_Music_All").Tables[0];
        }

        public DataTable GetPlayMusic()
        {
            Parameter[] parameter = {                                       
                                        new Parameter ("@IsMultiPlay",SqlDbType.Bit,1,_IsMultiPlay)
                                    };
            return objBusinessBase.GetDataToDataSet("usp_Music_GetPlayMusic", parameter).Tables[0];
        }


        public void Insert()
        {
            Parameter[] parameter = {
                                        new Parameter ("@Org_FileName" ,SqlDbType.NVarChar,-1,_Org_FileName),
                                        new Parameter ("@FileName",SqlDbType.NVarChar,-1,_FileName),
                                        new Parameter ("@IsPlay",SqlDbType.Bit,1,_IsPlay)
                                    };
            objBusinessBase.ExecuteProcedure("usp_Music_Insert", parameter);
        }

        public void Update()
        {
            Parameter[] parameter = {
                                       new Parameter ("@Music_nbr",SqlDbType.Int,4,_Music_nbr),
                                        new Parameter ("@Org_FileName" ,SqlDbType.NVarChar,-1,_Org_FileName),
                                        new Parameter ("@FileName",SqlDbType.NVarChar,-1,_FileName),
                                        new Parameter ("@IsPlay",SqlDbType.Bit,1,_IsPlay)
                                    };
            objBusinessBase.ExecuteProcedure("usp_Music_Update", parameter);
        }

        public void UpdateControlIsPlay()
        {
            Parameter[] parameter = {
                                       new Parameter ("@Music_nbr",SqlDbType.Int,4,_Music_nbr),
                                        new Parameter ("@IsPlay",SqlDbType.Bit,1,_IsPlay)
                                    };
            objBusinessBase.ExecuteProcedure("usp_Music_UpdateControlIsPlay", parameter);
        }

        public void Delete()
        {
            Parameter[] parameter = {
                                       new Parameter ("@Music_nbr",SqlDbType.Int,4,_Music_nbr)
                                    };
            objBusinessBase.ExecuteProcedure("usp_Music_Delete", parameter);
        }
    }
}

 
在網站創建一個網頁，讓客戶上傳MP3文件：

 

在.aspx.cs寫事件，引用兩個命名空間，和實例化Music對象：

 

接下來，我們處理銨鈕的Click事件，凡是上傳文件至站點，建議創建一個臨時文件夾，上傳文件時，先存入這個臨時文夾中。

 

接下來，我們對上傳的文件中，獲取到原文件名與新創建好的guid組合成的文件名，然后保存至剛才創建好的臨時文件夾中，下圖在說明，相信你看得懂。

然后，把相關的信息存入數據中，並把文件從臨時文件夾移至真正的目錄中：

 

看看效果：



上傳功能完成了。跟着來寫顯示上傳歌曲。使用GridView控件來顯示記錄。當然你完全可以使用你的方式來顯示它們。
創建 一個網頁MusicList.aspx，這個網頁是受權限控制，是專給后台管理員使用。

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Music Number
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("Music_nbr") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Original File Name
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("Org_FileName") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            File Name
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("FileName") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Is Play
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:CheckBox ID="CheckBox1" runat="server" Enabled="false" Checked='<%# Eval("IsPlay") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Play Update Date
                        </HeaderTemplate>
                        <ItemTemplate>
                            <%# Eval("PalyUpdateDate", "{0:yyyy-MM-dd HH:mm:ss}") %>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

去MusicList.aspx.cs給GridView控件綁定數據：


休息一下，看看瀏覽效果：

繼續，完成讓客戶能選中某首歌曲，能更新它，切換是否播放與停放，或是刪除它。
根據功能需求，發現數據庫中少寫了一個存儲過程，是以主鍵來獲取某筆記錄。



此時，還得去App_Code目錄下Insus.NET.Music對象中，添加一個函數：



補充完后，去MusicList.aspx網頁添加三列，參考如下：

每列拉放一個銨鈕，均作為對GridView控件的編輯，另外有點地方應該注意的是，在GridVeiw控件，還添加了DataKeyNames="Music_nbr"  屬性以及事件OnRowCreated="GridView1_RowCreated" 。 下面就是在MusicList.aspx.cs內GridView控件OnRowCreated事件：



下面分別對上面1,2,3個事件實現，序號1的事件，就是讓客戶能更新歌曲，去網頁添加上傳控件，和兩個銨鈕，




現在我們來看看序號1的事件，這個事件簡單，就是獲取GridView中被點擊銨鈕所屬記錄的主鍵，並用ViewState存儲起來，另外是把Panel1和FileUpload1控件啟用。

 下面是用戶選擇歌曲文件之后，點更新，此更新事件添加歌曲事件基本上一樣的 (下圖紫色高亮代碼)。只是在更新時，需要處理把舊的存在磁盤的歌曲文件刪除而已。



另一個銨鈕事件，就是取消的事件。



ok，看更新歌曲事件演示：



更新寫好了，跟着完成序號2的事件，在GridView控件的銨鈕，怎樣獲取GridView控件內的CheckBox的值？ 由於CheckBox的值是bool值，因此有箭頭的"!"取反值。



看看這個事件在運行時的效果，由false 轉為true時，時間有更新，反之，不更新。



最后一個序號3事件，是刪除記錄的事件，當刪除記錄時，存在磁盤的文件也應一同刪除。你看下面的代碼，相信你會的。



看看演示吧，在刪除前，少了個提醒功能，Insus.NET在此就不寫了，因為此功能在此博客有很多案例了。找找就有......




所有管理功能均完成了，接下來，是在前台的網頁做一個播放音樂的功能。由於客戶還沒給出要放在哪一個網頁內，或是幾個網頁都需要播放音樂的功能。因此Insus.NET先把這個播放音樂的功能做成一個用戶控件(ascx)，到時拉至網頁去即可。

能播放MP3音頻的組件很多，Insus.NET選用了這個：http://www.alsacreations.fr/dewplayer-en
很多多功能可以定制，樣式也很多可選擇。Insus.NET決定為客戶選擇下面的樣式：

 從下載包中，壓解的文件中，先把dewplayer-vol.swf文件拷貝至站點下，你可以設定目錄，需要記住它，等下還需要使用到它。打開index-xhtml.htm文件，選擇下高亮的代碼拷貝出來，將用戶控件會用到它，就是播放MP3音頻的組件。

 

 

 在.ascx頁面拉放一個Literal控件：

 
在.ascx.cs頁面寫代碼，下圖中，兩處棕色高亮的代碼"dewplayer-vol.swf?mp3="+ mp3 +" 是變動的地方，它要根據上面你設定的路徑之下，還是一個mp3變量，就是你從數據讀出來的歌曲名稱。

測試一下，試把此用戶控件拉至首頁看看效果：

 

運行看看是否成功？

馬上把測試結果通知給客戶，夜深了，電話就不必打了，還是發送給客戶通過郵件，明天客戶打開郵件，第一時間會看到。

后記:
此博文實現一個完整的功能，從數據庫設計開始，數據表，存儲過程。程序中實現了文件上傳至站點目錄。怎樣記錄原有文件名，新文件名，怎樣在更新時，刪除舊的物理文件，更新新文件，刪除記錄時，怎樣刪除物理文件。還是怎樣使用mp3組件，參考設置等一系功能.......