畢業(yè)設(shè)計(jì)基于bs架構(gòu)的音樂(lè)欣賞網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)

1、<p><b>　　畢業(yè)設(shè)計(jì)（論文）</b></p><p>　　基于B/S架構(gòu)的音樂(lè)欣賞網(wǎng)站設(shè)計(jì)與開(kāi)發(fā)</p><p>　　系 部： </p><p>　　學(xué)生姓名： </p><p>　　專業(yè)班級(jí)：

2、 </p><p>　　學(xué) 號(hào)： </p><p>　　指導(dǎo)教師： </p><p>　　二○一X年 X 月 XX 日</p><p>　　【摘要】計(jì)算機(jī)網(wǎng)絡(luò)是計(jì)算機(jī)技術(shù)和通信技術(shù)相結(jié)合的產(chǎn)物，

3、我們無(wú)時(shí)無(wú)刻不與網(wǎng)絡(luò)接觸。過(guò)去，我們都是通過(guò)磁帶、CD、等方式來(lái)聽(tīng)音樂(lè)。現(xiàn)在人們不再滿足于單調(diào)的文字或者圖像，而希望能在網(wǎng)上傳輸音樂(lè)、試聽(tīng)音樂(lè)。</p><p>　　【關(guān)鍵詞】Dreamweaver、音樂(lè)、多媒體、網(wǎng)站設(shè)計(jì)、HTML5、JavaScript、JQuery、MySQL</p><p>　　【Abstract】Computer network is a combination

4、of computer technology and communication technology products, we are always with the network contact. In the past, we are through the tape, CD, etc. to listen to music. Now people are no longer satisfied with monotonous

5、words or images, and want to be able to transfer music online, listen to music.</p><p>　　【Keywords】Dreamweaver, Music, Multimedia, Website Design, HTML5, JQuery, JavaScript, MySQL</p><p><b&g

6、t;　　目 錄</b></p><p><b>　　引 言5</b></p><p>　　一、本課題研究的內(nèi)容及意義6</p><p>　?。ㄒ唬┍菊n題研究的內(nèi)容6</p><p>　　（二）本課題研究的意義6</p><p>　?。ㄈ┮魳?lè)網(wǎng)站國(guó)內(nèi)外現(xiàn)狀7</p&

7、gt;<p><b>　　1. 國(guó)內(nèi)現(xiàn)狀7</b></p><p><b>　　2. 國(guó)外現(xiàn)狀8</b></p><p>　　二、系統(tǒng)環(huán)境概述9</p><p>　?。ㄒ唬╅_(kāi)發(fā)環(huán)境和技術(shù)介紹9</p><p>　　1. Dreamweaver簡(jiǎn)介10</p>&

8、lt;p>　　2. HTML5簡(jiǎn)介10</p><p>　　3. Jquery簡(jiǎn)介12</p><p>　　4. MySQL簡(jiǎn)介12</p><p><b>　　三、系統(tǒng)分析13</b></p><p>　　（一）功能需求13</p><p>　　1. 注冊(cè)模塊13</p&

9、gt;<p>　　2. 登錄模塊13</p><p>　　3. 添加音樂(lè)模塊13</p><p>　　4. 上傳音樂(lè)模塊13</p><p>　　5. 音樂(lè)查找模塊13</p><p>　　（二）性能需求14</p><p>　　1. 軟件環(huán)境需求14</p><p>

10、　　2. 硬件環(huán)境需求14</p><p><b>　　四、系統(tǒng)設(shè)計(jì)14</b></p><p>　?。ㄒ唬┫到y(tǒng)功能設(shè)計(jì)14</p><p><b>　　系統(tǒng)總體規(guī)劃14</b></p><p>　?。ǘ?shù)據(jù)庫(kù)設(shè)計(jì)15</p><p>　　數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì)15

11、</p><p>　?。ㄈ?shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì)16</p><p>　　五、代碼實(shí)現(xiàn)與運(yùn)行圖18</p><p>　?。ㄒ唬﹦?chuàng)建CSS文件18</p><p>　　樣式定義，統(tǒng)一頁(yè)面風(fēng)格18</p><p><b>　　六、系統(tǒng)測(cè)試26</b></p><p>　

12、?。ㄒ唬┫到y(tǒng)測(cè)試的主要內(nèi)容27</p><p>　　（二）系統(tǒng)測(cè)試的方法27</p><p>　?。ㄈ┫到y(tǒng)測(cè)試計(jì)劃28</p><p>　?。ㄋ模┫到y(tǒng)測(cè)試用例28</p><p><b>　　結(jié) 語(yǔ)29</b></p><p><b>　　參考文獻(xiàn)30</b>

13、</p><p><b>　　致 謝31</b></p><p><b>　　引 言</b></p><p>　　互聯(lián)網(wǎng)的興起給我們的生活?yuàn)蕵?lè)帶來(lái)的新的契機(jī)。網(wǎng)絡(luò)的交互性、實(shí)時(shí)性、豐富性和便捷性等優(yōu)勢(shì)促使傳統(tǒng)娛樂(lè)業(yè)迅速融入網(wǎng)絡(luò)的浪潮。通過(guò)網(wǎng)絡(luò)查詢信息。進(jìn)行音樂(lè)的收到、下載等在國(guó)外已成為一種時(shí)尚。</p>

14、<p>　　網(wǎng)站音樂(lè)播放系統(tǒng)是計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)通信技術(shù)、多媒體技術(shù)和數(shù)據(jù)壓縮技術(shù)等多學(xué)科、多領(lǐng)域融合交叉的產(chǎn)物，是可對(duì)音樂(lè)節(jié)目?jī)?nèi)容進(jìn)行自主選擇的交互式音樂(lè)點(diǎn)播系統(tǒng)。與傳統(tǒng)信息服務(wù)相比，在線音樂(lè)播放系統(tǒng)具有互動(dòng)性、友善性和數(shù)字化等特點(diǎn)，其本質(zhì)是信息的使用者根據(jù)自己的需求主動(dòng)獲取多媒體信息，它區(qū)別于信息發(fā)布的最大不同：一是主動(dòng)性；二是選擇性。借助其獨(dú)特的優(yōu)點(diǎn)，無(wú)論在國(guó)內(nèi)還是國(guó)外，在線音樂(lè)播放系統(tǒng)技術(shù)都獲得了長(zhǎng)足的發(fā)展，在社會(huì)各領(lǐng)

15、域（如服務(wù)、教育等）都十分廣泛，顯示出了強(qiáng)大的生命力。</p><p>　　一、本課題研究的內(nèi)容及意義</p><p>　?。ㄒ唬┍菊n題研究的內(nèi)容</p><p>　　隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的發(fā)展，音樂(lè)網(wǎng)站系統(tǒng)正逐漸的滲透到各個(gè)領(lǐng)域，網(wǎng)絡(luò)化和信息化的發(fā)展也促進(jìn)了Web網(wǎng)頁(yè)應(yīng)用和技術(shù)的快速發(fā)展。音樂(lè)網(wǎng)站正是在這樣的前提下而產(chǎn)生的，人們通過(guò)互聯(lián)網(wǎng)給日常生活增添了很大的樂(lè)趣，

16、讓人們?cè)诠ぷ髦罂梢赃M(jìn)行休閑的娛樂(lè)。</p><p>　　因?yàn)閷拵в脩舻脑黾?，帶?dòng)了互聯(lián)網(wǎng)音樂(lè)產(chǎn)業(yè)的蓬勃興起。無(wú)論國(guó)內(nèi)還是國(guó)外，音樂(lè)網(wǎng)站市場(chǎng)都呈現(xiàn)一派生氣。目前，音樂(lè)網(wǎng)站從傳播形式來(lái)看，大致可分為三類：有固定網(wǎng)址的音樂(lè)網(wǎng)站、搜索類音樂(lè)網(wǎng)站、P2P類音樂(lè)網(wǎng)站，三者功能各異，互為補(bǔ)充。近年來(lái),全球數(shù)字娛樂(lè)業(yè)持續(xù)發(fā)展。網(wǎng)絡(luò)傳播以其特有的快速、高效、便捷的傳輸方式被人們所接受，越來(lái)越多的走進(jìn)了大家。并 且在當(dāng)今

17、音樂(lè)浪潮的影響下。隨著音樂(lè)事業(yè)逐漸走向高峰,音樂(lè)已無(wú)處不在，音樂(lè)己與我們密不可分。全球數(shù)字娛樂(lè)業(yè)的迅猛發(fā)展、網(wǎng)絡(luò)電視等,無(wú)不充斥著激烈的競(jìng)爭(zhēng)。音樂(lè)網(wǎng)站在這種背景下逐漸發(fā)展起來(lái)。音樂(lè)網(wǎng)站改變了傳統(tǒng)音樂(lè)產(chǎn)業(yè)的產(chǎn)業(yè)結(jié)構(gòu)。而現(xiàn)在許多音樂(lè)網(wǎng)站不能提供在線播放,并且在技術(shù)支持上也不完善。于是設(shè)計(jì)和實(shí)現(xiàn)這樣一個(gè)音樂(lè)網(wǎng)站就成為了必須，不僅僅滿足用戶的可以試聽(tīng)音樂(lè)的功能,而且還要保證在速度上不能慢，更要在功能和性能上滿足用戶更多的體驗(yàn)和需求。</p

18、><p>　?。ǘ┍菊n題研究的意義</p><p>　　隨著網(wǎng)絡(luò)通信技術(shù)、多媒體技術(shù)及數(shù)據(jù)存儲(chǔ)技術(shù)的快速發(fā)展，音樂(lè)網(wǎng)站作為一種大眾的Web服務(wù)，給喜愛(ài)音樂(lè)的網(wǎng)絡(luò)用戶提供了極大的便利，增添了音樂(lè)用戶的選擇。但有一些音樂(lè)網(wǎng)站由于各種不同的原因遭到了社會(huì)的淘汰，其原因主要集中在頁(yè)面設(shè)計(jì)、查詢?yōu)g覽的速度、功能模塊等不同方面。因此，為了用戶可以方便、快捷、簡(jiǎn)單、安全地實(shí)現(xiàn)音樂(lè)搜索去查找自己喜歡的音樂(lè)，

19、并能實(shí)時(shí)地試聽(tīng)音樂(lè)、下載音樂(lè)、將音樂(lè)加入到自己的音樂(lè)盒中、點(diǎn)歌并將自己的建議寫(xiě)入到留言板以便網(wǎng)站的完善等，需要建立一個(gè)自由、安全的音樂(lè)網(wǎng)站。本音樂(lè)網(wǎng)站基于Dreamweaver采用先進(jìn)的HTML5技術(shù)與Jquery框架進(jìn)行設(shè)計(jì)開(kāi)發(fā)。</p><p>　?。ㄈ┮魳?lè)網(wǎng)站國(guó)內(nèi)外現(xiàn)狀</p><p><b>　　1. 國(guó)內(nèi)現(xiàn)狀</b></p><p>

20、;　　2015年中國(guó)在線音樂(lè)市場(chǎng)規(guī)模為40.2億元，增長(zhǎng)67.2%。隨著版權(quán)市場(chǎng)逐漸規(guī)范，特別是2015年7月以來(lái)國(guó)家對(duì)在線音樂(lè)版權(quán)市場(chǎng)的監(jiān)管力度逐漸加大，在線音樂(lè)市場(chǎng)發(fā)展將更為正規(guī)有序。在音樂(lè)市場(chǎng)收入結(jié)構(gòu)中，廣告、游戲聯(lián)運(yùn)等模式比較成熟，增長(zhǎng)穩(wěn)定；直播、用戶付費(fèi)等增長(zhǎng)快速，是企業(yè)重要的收入來(lái)源，預(yù)計(jì)未來(lái)仍將保持較快增長(zhǎng)；另外，O2O演出、衍生商品售賣等雖然目前在市場(chǎng)中占比較小，但未來(lái)也有較大成長(zhǎng)空間。在市場(chǎng)商業(yè)模式多元化的作用下，用戶

21、付費(fèi)、廣告、直播、音樂(lè)周邊產(chǎn)品銷售等收入模式將共同促進(jìn)市場(chǎng)繼續(xù)平穩(wěn)快速增長(zhǎng)。</p><p>　　圖1-3-1 2010-2018年中國(guó)在線音樂(lè)市場(chǎng)收入規(guī)模及增長(zhǎng)率</p><p>　　根據(jù)調(diào)研數(shù)據(jù)顯示，中國(guó)在線音樂(lè)用戶對(duì)于音樂(lè)網(wǎng)站及應(yīng)用的整體滿意度較高，其中，手機(jī)端產(chǎn)品滿意度略高于PC端；在手機(jī)端，接近40%的用戶同時(shí)擁有2款音樂(lè)App，24.5%用戶同時(shí)擁有3款音樂(lè)App。近年來(lái)，中國(guó)

22、在線音樂(lè)產(chǎn)品不斷提升用戶體驗(yàn)、豐富音樂(lè)內(nèi)容、擴(kuò)展自身業(yè)務(wù)能力與運(yùn)營(yíng)能力，得到了較好的成效。同時(shí)，音樂(lè)版權(quán)在中國(guó)的發(fā)展正處于初級(jí)階段，音樂(lè)網(wǎng)站的戰(zhàn)略布局使各產(chǎn)品具有不同特色，擁有的內(nèi)容也不盡相同，用戶對(duì)于音樂(lè)內(nèi)容的選擇隨著其喜好和使用場(chǎng)景的不同而發(fā)生變化，在音樂(lè)產(chǎn)品的選擇上也具有較大靈活性。</p><p>　　圖 1-3-2 2016年中國(guó)手機(jī)音樂(lè)用戶同時(shí)擁有音樂(lè)App的數(shù)量分布圖</p><

23、p><b>　　2. 國(guó)外現(xiàn)狀</b></p><p>　　網(wǎng)絡(luò)音樂(lè)風(fēng)靡美國(guó)，對(duì)其傳統(tǒng)音樂(lè)產(chǎn)業(yè)帶來(lái)了巨大沖擊，尤其是音像制品的銷售額逐年銳減。據(jù)美國(guó)錄音工業(yè)協(xié)會(huì)（Recording Industry Association America, RIAA）調(diào)查顯示：美國(guó)近幾年的音樂(lè)CD、磁帶等音像制品銷售額逐年減少，一個(gè)主要原因是人們通過(guò)在線方式狹隘網(wǎng)絡(luò)音樂(lè)，而減少了傳統(tǒng)音樂(lè)音像制品的消費(fèi)

24、。根據(jù)RIAA的數(shù)據(jù)顯示，在2015年上半年CD的銷售額為4.94億美元，與2014年同期相比下降了31.4%。而且被數(shù)字專輯出售（5.72億美元）和數(shù)字單曲下載（6.88億美元）的收入超過(guò)。</p><p>　　不過(guò)雖然如此，在2015上半年CD的銷售額仍然比廣告支持的流媒體（1.63億美元）以及流媒體付費(fèi)訂閱（4.78億美元）收入更多，同時(shí)也超過(guò)公共音樂(lè)版權(quán)的收入（3.87億美元），公共音樂(lè)版權(quán)收入來(lái)自于網(wǎng)絡(luò)

25、電臺(tái)服務(wù)例如Pandora、IHeartRadio等。</p><p>　　所以CD雖然表現(xiàn)有所下降但是并未走致死路。根據(jù)尼爾森的數(shù)據(jù)，在2015上半年實(shí)體專輯包括CD、黑膠、磁帶三部分在美國(guó)獨(dú)立零售店的銷售量有所上升，盡管只是上升了0.6%。</p><p>　　在非傳統(tǒng)零售方面，例如亞馬遜或16其他在線商店出售的專輯數(shù)量總體上升了8%，那么CD銷量究竟為什么是下降的呢？</p&g

26、t;<p>　　根據(jù)尼爾森的數(shù)據(jù)，大眾零售市場(chǎng)在2015年的實(shí)體專輯銷量相比2014年同期下降了510萬(wàn)張，達(dá)18.2%。而美國(guó)的連鎖店市場(chǎng)也受到影響，實(shí)體專輯的銷量與2014年相比也下降了百萬(wàn)張。</p><p>　　圖 1-3-3 美國(guó)2015 H1音樂(lè)產(chǎn)業(yè)收入圖</p><p><b>　　二、系統(tǒng)環(huán)境概述</b></p><p

27、>　?。ㄒ唬╅_(kāi)發(fā)環(huán)境和技術(shù)介紹</p><p>　　本音樂(lè)網(wǎng)站系統(tǒng)的設(shè)計(jì)是基于HTML5和B/S架構(gòu)以及MySQL數(shù)據(jù)庫(kù)來(lái)實(shí)現(xiàn)的。本系統(tǒng)的開(kāi)發(fā)工具主要有Dreamweaver、MySQL數(shù)據(jù)庫(kù)管理工具等。</p><p>　　1. Dreamweaver簡(jiǎn)介</p><p>　　Dreamweaver是一款所見(jiàn)則所得網(wǎng)頁(yè)編輯器，是美國(guó)MACROMEDIA公司開(kāi)

28、發(fā)的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。</p><p>　　DREAMWEAVER特點(diǎn)：</p><p>　　（1）最佳的制作效率</p><p>　　Dreamweaver可以用最快速的方式將Fireworks，F(xiàn)ree

29、Hand，或Photoshop等檔案移至網(wǎng)頁(yè)上。使用檢色吸管工具選擇螢?zāi)簧系念伾稍O(shè)定最接近的網(wǎng)頁(yè)安全色。對(duì)於選單，快捷鍵與格式控制，都只要一個(gè)簡(jiǎn)單步驟便可完成。Dremweaver能與您喜愛(ài)的設(shè)計(jì)工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開(kāi)Dremweaver便可完成，整體運(yùn)用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動(dòng)開(kāi)啟Firework或Photoshop來(lái)進(jìn)行編輯與設(shè)定圖

30、檔的最佳化。</p><p><b>　?。?）網(wǎng)站管理</b></p><p>　　使用網(wǎng)站地圖可以快速制作網(wǎng)站雛形、設(shè)計(jì)、更新和重組網(wǎng)頁(yè)。改變網(wǎng)頁(yè)位置或檔案名稱，Dreamweaver 會(huì)自動(dòng)更新所有連結(jié)。使用支援文字、HTML碼、HTML屬性標(biāo)簽和一般語(yǔ)法的搜尋及置換功能使得復(fù)雜的網(wǎng)站更新變得迅速又簡(jiǎn)單。</p><p>　?。?）無(wú)可比

31、擬的控制能力</p><p>　　是唯一提供Roundtrip HTML、視覺(jué)化編輯與原始碼編輯同步的設(shè)計(jì)工具。可以全方位的呈現(xiàn)在任何平臺(tái)的熱門瀏覽器上。</p><p>　　2. HTML5簡(jiǎn)介</p><p>　　HTML 5是近十年來(lái)Web開(kāi)發(fā)標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML 5并非僅僅用來(lái)表示W(wǎng)eb內(nèi)容，它的新使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)

32、，在HTML 5平臺(tái)上，視頻，音頻，圖象，動(dòng)畫(huà)，以及同電腦的交互都被標(biāo)準(zhǔn)化。</p><p>　　什么是 HTML5?</p><p>　　HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。</p><p>　　HTML 的上一個(gè)版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。</p><p>　　

33、HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。</p><p>　　HTML5 是如何起步的？</p><p>　　HTML5 是 W3C 與 WHATWG 合作的結(jié)果。</p><p>　　為 HTML5 建立的一些規(guī)則：</p><p>　　（1）新特性應(yīng)該基于 HTML、CSS、DOM 以及 Jav

34、aScript。</p><p>　?。?）減少對(duì)外部插件的需求(比如 Flash)</p><p>　?。?）更優(yōu)秀的錯(cuò)誤處理</p><p>　?。?）更多取代腳本的標(biāo)記</p><p>　?。?）HTML5 應(yīng)該獨(dú)立于設(shè)備</p><p>　　（6）開(kāi)發(fā)進(jìn)程應(yīng)對(duì)公眾透明</p><p>　

35、　與HTML 4的不同之處：</p><p>　　新的解析順序新的元素：section, video, progress, nav, meter, time, aside, canvasinput元素的新屬性：日期和時(shí)間，email, url。新的通用屬性：ping, charset, async全域?qū)傩裕篿d, tabindex, repeat。移除元素：center, font, strike。</p&

36、gt;<p>　　HTML 5有兩大特點(diǎn)：</p><p>　　首先，強(qiáng)化了Web網(wǎng)頁(yè)的表現(xiàn)性能。除了可描繪二維圖形外，還準(zhǔn)備了用于播放視頻和音頻的標(biāo)簽。</p><p>　　其次，追加了本地?cái)?shù)據(jù)庫(kù)等Web應(yīng)用的功能。</p><p>　　3. Jquery簡(jiǎn)介</p><p>　　jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScri

37、pt框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)（或JavaScript框架）。jQuery設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫(xiě)更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和Ajax交互。</p><p>　　jQuery的核心特性可以總結(jié)為：具有獨(dú)特的鏈

38、式語(yǔ)法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展；擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。</p><p>　　4. MySQL簡(jiǎn)介</p><p>　　MySQL是一個(gè)精巧的SQL數(shù)據(jù)庫(kù)管理系統(tǒng)，雖然MySQL不是開(kāi)放源代碼的產(chǎn)品，但MySQ

39、L數(shù)據(jù)庫(kù)是開(kāi)放源碼的一種小型關(guān)聯(lián)式數(shù)據(jù)庫(kù)管理系統(tǒng)。MySQL數(shù)據(jù)庫(kù)的特點(diǎn)是體積小、處理速度快、總體成本低等，使得在因特網(wǎng)上的中小型的網(wǎng)站的應(yīng)用非常廣泛。并優(yōu)于其開(kāi)放源碼這特點(diǎn)，有很多的中小型網(wǎng)站為了降低網(wǎng)站總體成本就必定會(huì)選擇Mysql數(shù)據(jù)庫(kù)作為網(wǎng)站數(shù)據(jù)庫(kù)。 </p><p>　　對(duì)于其他大型數(shù)據(jù)庫(kù)例如Oracle、SQLserver、db2等相比，MySQL數(shù)據(jù)庫(kù)肯定有其不足的地方例如穩(wěn)定性和功能。但

40、這也絲毫不會(huì)減少它受歡迎的程度，因?yàn)閷?duì)于一般的個(gè)人和中小型企業(yè)來(lái)說(shuō)，MySQL數(shù)據(jù)庫(kù)所提供的功能是絕對(duì)可以滿足的。</p><p><b>　　三、系統(tǒng)分析</b></p><p><b>　?。ㄒ唬┕δ苄枨?lt;/b></p><p><b>　　1. 注冊(cè)模塊</b></p><p

41、>　　作為音樂(lè)網(wǎng)站的用戶，需要注冊(cè)成為本網(wǎng)站的會(huì)員才能享受到網(wǎng)站的所有權(quán)利，注冊(cè)就是使普通用戶變成會(huì)員的途徑，本模塊主要完成的任務(wù)是提示用戶添加自己的基本信息，將用戶信息添加到數(shù)據(jù)庫(kù)。</p><p><b>　　2. 登錄模塊</b></p><p>　　用戶注冊(cè)成為本站會(huì)員后就可以登錄本網(wǎng)站了，在此模塊會(huì)判斷用戶是不是本站注冊(cè)會(huì)員，會(huì)判斷用戶的用戶賬號(hào)和密碼

42、是否匹配，如果匹配則將用戶信息顯示出來(lái)并可以執(zhí)行其他操作，如果不匹配會(huì)提示用戶輸入用戶賬號(hào)和密碼錯(cuò)誤。登錄后用戶可以選擇修改自己的個(gè)人資料。</p><p><b>　　3. 添加音樂(lè)模塊</b></p><p>　　用戶注冊(cè)成為本站會(huì)員后就可以登錄本網(wǎng)站了，在此模塊會(huì)判斷用戶是不是本站注冊(cè)會(huì)員，會(huì)判斷用戶的用戶賬號(hào)和密碼是否匹配，如果匹配則將用戶信息顯示出來(lái)并可以執(zhí)

43、行其他操作，如果不匹配會(huì)提示用戶輸入用戶賬號(hào)和密碼錯(cuò)誤。登錄后用戶可以選擇修改自己的個(gè)人資料。</p><p><b>　　4. 上傳音樂(lè)模塊</b></p><p>　　上傳音樂(lè)是網(wǎng)站增加音樂(lè)的主要方式，用戶選擇自己的音樂(lè)，并選擇該音樂(lè)所屬專輯，最后上傳音樂(lè)。</p><p><b>　　5. 音樂(lè)查找模塊</b><

44、;/p><p>　　音樂(lè)查找是音樂(lè)網(wǎng)站的核心，音樂(lè)網(wǎng)站應(yīng)該提供按照音樂(lè)名和音樂(lè)出品人查找這兩種最基本的音樂(lè)查找方式，除了這兩種基本查找音樂(lè)方式外還應(yīng)有按照專輯查找，按音樂(lè)類型查找，按音樂(lè)地區(qū)查找等查找方式。音樂(lè)查找結(jié)果最后列表顯示，用戶點(diǎn)擊對(duì)應(yīng)屬性鏈接可以實(shí)現(xiàn)按照這個(gè)屬性查找或者排序。點(diǎn)擊對(duì)應(yīng)的音樂(lè)名可以試聽(tīng)音樂(lè)。</p><p><b>　　（二）性能需求</b><

45、;/p><p><b>　　1. 軟件環(huán)境需求</b></p><p>　　表3-2-1 軟件環(huán)境需求表</p><p><b>　　2. 硬件環(huán)境需求</b></p><p>　　表3-2-2 硬件環(huán)境需求表</p><p><b>　　四、系統(tǒng)設(shè)計(jì)</b>

46、;</p><p><b>　?。ㄒ唬┫到y(tǒng)功能設(shè)計(jì)</b></p><p><b>　　系統(tǒng)總體規(guī)劃</b></p><p>　　本網(wǎng)站按照需求開(kāi)發(fā)，可分為一下幾個(gè)模塊：注冊(cè)模塊、登錄模塊、增加音樂(lè)模塊、上傳音樂(lè)模塊、音樂(lè)查找模塊</p><p>　　圖4-1-1音樂(lè)網(wǎng)站系統(tǒng)功能模塊圖</p&

47、gt;<p><b>　　（二）數(shù)據(jù)庫(kù)設(shè)計(jì)</b></p><p>　　數(shù)據(jù)庫(kù)是音樂(lè)網(wǎng)站的核心組成部分，所有信息處理子系統(tǒng)都將基于某種數(shù)據(jù)庫(kù)平臺(tái)，以便將其處理的信息資源完整、安全地保存起來(lái)，并且對(duì)其進(jìn)行各種管理和利用。選擇一個(gè)好的數(shù)據(jù)庫(kù)平臺(tái)是非常重要的。在選擇數(shù)據(jù)庫(kù)平臺(tái)時(shí)，應(yīng)考慮下列因素： </p><p>　　（1）性能：數(shù)據(jù)庫(kù)的數(shù)據(jù)處理能力

48、； </p><p>　?。?）開(kāi)放性：數(shù)據(jù)庫(kù)是否能在多種操作系統(tǒng)下使用； </p><p>　?。?）安全性：數(shù)據(jù)庫(kù)是否具有高度的安全性； </p><p>　　（4）可靠性：數(shù)據(jù)庫(kù)是否具有高度的可靠性； </p><p>　?。?）并行性：數(shù)據(jù)庫(kù)是否并行運(yùn)行在多節(jié)點(diǎn)上； </p>

49、;<p>　　根據(jù)本網(wǎng)站開(kāi)發(fā)應(yīng)用的實(shí)際需要，我們選擇了MYSQL作為數(shù)據(jù)庫(kù)開(kāi)發(fā)平臺(tái)。</p><p><b>　　數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì)</b></p><p>　　由于實(shí)體屬性較多，此處主要體現(xiàn)了各個(gè)實(shí)體間的關(guān)系，詳細(xì)設(shè)計(jì)見(jiàn)數(shù)據(jù)庫(kù)設(shè)計(jì)中表結(jié)構(gòu)的字段。如圖4-2-1所示：</p><p>　　圖4-2-1 數(shù)據(jù)庫(kù)概念結(jié)構(gòu)設(shè)計(jì)E-R圖&

50、lt;/p><p>　　圖4-2-2 實(shí)體設(shè)計(jì)E-R圖</p><p>　?。ㄈ?shù)據(jù)庫(kù)邏輯結(jié)構(gòu)設(shè)計(jì)</p><p>　　根據(jù)實(shí)體屬性及其產(chǎn)生的行為，從實(shí)際需要出發(fā)，同時(shí)又考慮各實(shí)體間的聯(lián)系和統(tǒng)一性，設(shè)計(jì)出如下各表。 </p><p>　　（1）admi表：admin表是用來(lái)存放管理員信息的表，管理員信息包括用戶賬號(hào)、密碼等信息。Adm

51、in表結(jié)構(gòu)如表4-3-1所示。</p><p>　　表4-3-1 admin表結(jié)構(gòu)</p><p>　?。?）User表：User表是用來(lái)存放用戶信息的表，用戶信息除了包括用戶賬號(hào)、密碼、昵稱等信息還包括機(jī)箱選填信息，User表結(jié)構(gòu)如表4-3-2所示。</p><p>　　表4-3-2 User表結(jié)構(gòu)</p><p>　?。?）Music表：

52、Music表是存放音樂(lè)信息的表，此表將音樂(lè)的屬性簡(jiǎn)單描述，包括音樂(lè)類型、地區(qū)、音樂(lè)名等常見(jiàn)屬性，此表設(shè)置代理主鍵（自增）作為主鍵，這個(gè)主鍵也是其他音樂(lè)關(guān)聯(lián)表的外鍵，表結(jié)構(gòu)如表4-3-3所示。</p><p>　　表4-3-3 User表結(jié)構(gòu)</p><p>　?。?）Cliplist表：該表用來(lái)存放音樂(lè)固定專輯（唱片公司發(fā)行的）信息，由于本網(wǎng)站規(guī)模和本人對(duì)專輯認(rèn)識(shí)的限制，對(duì)專輯屬性的設(shè)置相

53、對(duì)比較簡(jiǎn)單。因?yàn)閷］嬘⒄Z(yǔ)音樂(lè)術(shù)語(yǔ)“多對(duì)多”關(guān)系，所以在此表中不設(shè)置與音樂(lè)的關(guān)聯(lián)，將關(guān)聯(lián)寫(xiě)至Cm表，Cliplist表結(jié)構(gòu)如表4-3-4所示。</p><p>　　表4-3-4  Cliplist表結(jié)構(gòu)</p><p>　?。?）Cm表：該表是music表和cliplist表的關(guān)系表，用來(lái)處理音樂(lè)和專輯的關(guān)系，這里一個(gè)音樂(lè)作品可以屬于多個(gè)專輯，同時(shí)一個(gè)專輯包含多個(gè)音樂(lè)作品。Clip

54、list表結(jié)構(gòu)如表4-3-5所示。</p><p>　　表4-3-5 Cm表結(jié)構(gòu)</p><p>　　五、代碼實(shí)現(xiàn)與運(yùn)行圖</p><p>　?。ㄒ唬﹦?chuàng)建CSS文件</p><p>　　樣式定義，統(tǒng)一頁(yè)面風(fēng)格</p><p><b>　　body {</b></p><p>

55、;　　font: 14px "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;</p><p>　　background: #333;</p><p>　　color: #fff;</p><p><b>　　}</b></p&g

56、t;<p><b>　　a {</b></p><p>　　outline: none;</p><p>　　text-decoration: none;</p><p><b>　　}</b></p><p><b>　　.left {</b></p>

57、;<p>　　float: left;</p><p><b>　　}</b></p><p><b>　　.right {</b></p><p>　　float: right;</p><p><b>　　}</b></p><p>&

58、lt;b>　　.clear {</b></p><p>　　clear: both;</p><p><b>　　}</b></p><p>　　#background {</p><p>　　background: url(bg.jpg);</p><p>　　backgrou

59、nd-size: cover;</p><p>　　position: fixed;</p><p><b>　　top: 0;</b></p><p><b>　　left: 0;</b></p><p>　　width: 100%;</p><p>　　height: 1

60、00%;</p><p>　　-moz-user-select: none;</p><p>　　-khtml-user-select: none;</p><p>　　-webkit-user-select: none;</p><p>　　-o-user-select: none;</p><p>　　user-s

61、elect: none;</p><p><b>　　}</b></p><p><b>　　#player {</b></p><p>　　width: 500px;</p><p>　　height: 130px;</p><p>　　padding: 25px;<

62、/p><p>　　margin: 50px auto 30px;</p><p>　　position: relative;</p><p><b>　　}</b></p><p>　　#player .cover {</p><p>　　background: rgba(0, 0, 0, 0.5);

63、</p><p>　　border: 1px solid #333;</p><p>　　position: absolute;</p><p>　　top: 25px;</p><p>　　left: 25px;</p><p>　　overflow: hidden;</p><p>　　-m

64、oz-border-radius: 10px;</p><p>　　-webkit-border-radius: 10px;</p><p>　　-o-border-radius: 10px;</p><p>　　-ms-border-radius: 10px;</p><p>　　-khtml-border-radius: 10px;<

65、;/p><p>　　border-radius: 10px;</p><p>　　width: 130px;</p><p>　　height: 130px;</p><p>　　-moz-box-shadow: 0 2px 10px black;</p><p>　　-webkit-box-shadow: 0 2px 1

66、0px black;</p><p>　　-o-box-shadow: 0 2px 10px black;</p><p>　　box-shadow: 0 2px 10px black;</p><p><b>　　}</b></p><p>　　#player .cover img {</p><p

67、>　　-moz-border-radius: 10px;</p><p>　　-webkit-border-radius: 10px;</p><p>　　-o-border-radius: 10px;</p><p>　　-ms-border-radius: 10px;</p><p>　　-khtml-border-radius:

68、10px;</p><p>　　border-radius: 10px;</p><p>　　width: 130px;</p><p>　　height: 130px;</p><p><b>　　}</b></p><p>　　#player .ctrl {</p><p&

69、gt;　　margin-left: 155px;</p><p>　　text-shadow: 0 1px 2px #000;</p><p>　　line-height: 16px;</p><p><b>　　}</b></p><p>　　#player .ctrl .tag strong, #player .ct

70、rl .tag span {</p><p>　　display: block;</p><p>　　text-overflow: ellipsis;</p><p><b>　　}</b></p><p>　　#player .ctrl .tag span {</p><p>　　font-si

71、ze: 12px;</p><p>　　margin-top: 5px;</p><p>　　color: #ccc;</p><p>　　（二）播放器Jquery實(shí)現(xiàn)代碼</p><p>　　(function($){</p><p>　　// Settings</p><p>　　var r

72、epeat = localStorage.repeat || 0,</p><p>　　shuffle = localStorage.shuffle || 'false',</p><p>　　continous = true,</p><p>　　autoplay = true,</p><p>　　playlist = [

73、</p><p><b>　　{</b></p><p>　　title: '秋殤別戀',</p><p>　　artist: '格子兮、牙牙樂(lè)',</p><p>　　album: '格子兮、牙牙樂(lè) - 秋殤別戀.mp3',</p><p>　　c

74、over:'img/1.jpg',</p><p>　　mp3: 'mp3/格子兮、牙牙樂(lè) - 秋殤別戀.mp3',</p><p><b>　　ogg: ''</b></p><p><b>　　},</b></p><p><b>　　{

75、</b></p><p>　　title: '亡靈序曲',</p><p>　　artist: '魔獸世界',</p><p>　　album: '魔獸世界 - 亡靈序曲.mp3',</p><p>　　cover: 'img/2.jpg',</p>&

76、lt;p>　　mp3: 'mp3/The Dawn.mp3',</p><p><b>　　ogg: ''</b></p><p><b>　　},</b></p><p><b>　　{</b></p><p>　　title: '

77、;別再讓步',</p><p>　　artist: '童可可',</p><p>　　album: '童可可 - 別再讓步.mp3',</p><p>　　cover: 'img/3.jpg',</p><p>　　mp3: 'mp3/童可可 - 別再讓步.mp3',&l

78、t;/p><p><b>　　ogg: ''</b></p><p><b>　　},</b></p><p><b>　　{</b></p><p>　　title: '漂洋過(guò)海來(lái)看你',</p><p>　　artist:

79、 '丁當(dāng)',</p><p>　　album: '漂洋過(guò)海來(lái)看你 - 丁當(dāng).mp3',</p><p>　　cover: 'img/4.jpg',</p><p>　　mp3: 'mp3/漂洋過(guò)海來(lái)看你 - 丁當(dāng).mp3',</p><p><b>　　ogg: 

80、9;'</b></p><p><b>　　},</b></p><p><b>　　{</b></p><p>　　title: '龍的傳人',</p><p>　　cover: 'img/5.jpg',</p><p>

81、　　artist: '成龍',</p><p>　　album: '龍的傳人',</p><p>　　mp3: 'mp3/龍的傳人 – 成龍.mp3',</p><p><b>　　}];</b></p><p>　　// Load playlist</p>

82、<p>　　for (var i=0; i<playlist.length; i++){</p><p>　　var item = playlist[i];</p><p>　　$('#playlist').append('<li>'+item.artist+' - '+item.title+'</l

83、i>');</p><p><b>　　}</b></p><p>　　var time = new Date(),</p><p>　　currentTrack = shuffle === 'true' ? time.getTime() % playlist.length : 0,</p><

84、p>　　trigger = false,</p><p>　　audio, timeout, isPlaying, playCounts;</p><p>　　var play = function(){</p><p>　　audio.play();</p><p>　　$('.playback').addClass(

85、'playing');</p><p>　　timeout = setInterval(updateProgress, 500);</p><p>　　isPlaying = true;</p><p><b>　　}</b></p><p>　　var pause = function(){</p

86、><p>　　audio.pause();</p><p>　　$('.playback').removeClass('playing');</p><p>　　clearInterval(updateProgress);</p><p>　　isPlaying = false;</p><p&

87、gt;<b>　　}</b></p><p>　　// Update progress</p><p>　　var setProgress = function(value){</p><p>　　var currentSec = parseInt(value%60) < 10 ? '0' + parseInt(value

88、%60) : parseInt(value%60),</p><p>　　ratio = value / audio.duration * 100;</p><p>　　$('.timer').html(parseInt(value/60)+':'+currentSec);</p><p>　　$('.progress .pa

89、ce').css('width', ratio + '%');</p><p>　　$('.progress .slider a').css('left', ratio + '%');</p><p><b>　　}</b></p><p>　　var up

90、dateProgress = function(){</p><p>　　setProgress(audio.currentTime);</p><p><b>　　}</b></p><p>　　// Progress slider</p><p>　　$('.progress .slider').sl

91、ider({step: 0.1, slide: function(event, ui){</p><p>　　$(this).addClass('enable');</p><p>　　setProgress(audio.duration * ui.value / 100);</p><p>　　clearInterval(timeout);<

92、/p><p>　　}, stop: function(event, ui){</p><p>　　audio.currentTime = audio.duration * ui.value / 100;</p><p>　　$(this).removeClass('enable');</p><p>　　timeout = set

93、Interval(updateProgress, 500);</p><p><b>　　}});</b></p><p>　　// Volume slider</p><p>　　var setVolume = function(value){</p><p>　　audio.volume = localStorage

94、.volume = value;</p><p>　　$('.volume .pace').css('width', value * 100 + '%');</p><p>　　$('.volume .slider a').css('left', value * 100 + '%');</

95、p><p><b>　　}</b></p><p>　　var volume = localStorage.volume || 0.5;</p><p>　　$('.volume .slider').slider({max: 1, min: 0, step: 0.01, value: volume, slide: function(

96、event, ui){</p><p>　　setVolume(ui.value);</p><p>　　$(this).addClass('enable');</p><p>　　$('.mute').removeClass('enable');</p><p>　　}, stop: func

97、tion(){</p><p>　　$(this).removeClass('enable');</p><p>　　}}).children('.pace').css('width', volume * 100 + '%');</p><p>　　$('.mute').click(fu

98、nction(){</p><p>　　if ($(this).hasClass('enable')){</p><p>　　setVolume($(this).data('volume'));</p><p>　　$(this).removeClass('enable');</p><p>&

99、lt;b>　　} else {</b></p><p>　　$(this).data('volume', audio.volume).addClass('enable');</p><p>　　setVolume(0);</p><p><b>　　}</b></p><p&

100、gt;<b>　　});</b></p><p>　　// Switch track</p><p>　　var switchTrack = function(i){</p><p>　　if (i < 0){</p><p>　　track = currentTrack = playlist.length - 1

101、;</p><p>　　} else if (i >= playlist.length){</p><p>　　track = currentTrack = 0;</p><p><b>　　} else {</b></p><p>　　track = i;</p><p><b>

102、;　　}</b></p><p>　　$('audio').remove();</p><p>　　loadMusic(track);</p><p>　　if (isPlaying == true) play();</p><p><b>　　}</b></p><p&g

103、t;　　// Shuffle</p><p>　　var shufflePlay = function(){</p><p>　　var time = new Date(),</p><p>　　lastTrack = currentTrack;</p><p>　　currentTrack = time.getTime() % playli

104、st.length;</p><p>　　if (lastTrack == currentTrack) ++currentTrack;</p><p>　　switchTrack(currentTrack);</p><p><b>　　}</b></p><p>　　// Fire when track ended&l

105、t;/p><p>　　var ended = function(){</p><p><b>　　pause();</b></p><p>　　audio.currentTime = 0;</p><p>　　playCounts++;</p><p>　　if (continous == true)

106、 isPlaying = true;</p><p>　　if (repeat == 1){</p><p><b>　　play();</b></p><p><b>　　} else {</b></p><p>　　if (shuffle === 'true'){</p&g

107、t;<p>　　shufflePlay();</p><p><b>　　} else {</b></p><p>　　if (repeat == 2){</p><p>　　switchTrack(++currentTrack);</p><p><b>　　} else {</b>

108、</p><p>　　if (currentTrack < playlist.length) switchTrack(++currentTrack);</p><p><b>　　}</b></p><p><b>　　}</b></p><p><b>　　}</b>&

109、lt;/p><p><b>　　}</b></p><p>　　var beforeLoad = function(){</p><p>　　var endVal = this.seekable && this.seekable.length ? this.seekable.end(0) : 0;</p><p&

110、gt;　　$('.progress .loaded').css('width', (100 / (this.duration || 1) * endVal) +'%');</p><p><b>　　}</b></p><p>　　// Fire when track loaded completely</p>

111、;<p>　　var afterLoad = function(){</p><p>　　if (autoplay == true) play();</p><p><b>　　}</b></p><p>　　// Load track</p><p>　　var loadMusic = function(

112、i){</p><p>　　var item = playlist[i],</p><p>　　newaudio = $('<audio>').html('<source src="'+item.mp3+'"><source src="'+item.ogg+'"&g

113、t;').appendTo('#player');</p><p>　　$('.cover').html('<img src="'+item.cover+'" alt="'+item.album+'">');</p><p>　　$('.tag

114、').html('<strong>'+item.title+'</strong><span class="artist">'+item.artist+'</span><span class="album">'+item.album+'</span>');&

115、lt;/p><p>　　$('#playlist li').removeClass('playing').eq(i).addClass('playing');</p><p>　　audio = newaudio[0];</p><p>　　audio.volume = $('.mute').hasClas

116、s('enable') ? 0 : volume;</p><p>　　audio.addEventListener('progress', beforeLoad, false);</p><p>　　audio.addEventListener('durationchange', beforeLoad, false);</p>

117、<p>　　audio.addEventListener('canplay', afterLoad, false);</p><p>　　audio.addEventListener('ended', ended, false);</p><p><b>　　}</b></p><p>　　loadM

118、usic(currentTrack);</p><p>　　$('.playback').on('click', function(){</p><p>　　if ($(this).hasClass('playing')){</p><p><b>　　pause();</b></p>

119、<p><b>　　} else {</b></p><p><b>　　play();</b></p><p><b>　　}</b></p><p><b>　　});</b></p><p>　　$('.rewind')

120、.on('click', function(){</p><p>　　if (shuffle === 'true'){</p><p>　　shufflePlay();</p><p><b>　　} else {</b></p><p>　　switchTrack(--currentTr

121、ack);</p><p><b>　　}</b></p><p><b>　　});</b></p><p>　　$('.fastforward').on('click', function(){</p><p>　　if (shuffle === 'tru

122、e'){</p><p>　　shufflePlay();</p><p><b>　　} else {</b></p><p>　　switchTrack(++currentTrack);</p><p><b>　　}</b></p><p><b>　

123、　});</b></p><p>　　$('#playlist li').each(function(i){</p><p>　　var _i = i;</p><p>　　$(this).on('click', function(){</p><p>　　switchTrack(_i);</

124、p><p><b>　　});</b></p><p><b>　　});</b></p><p>　　if (shuffle === 'true') $('.shuffle').addClass('enable');</p><p>　　if (repe

125、at == 1){</p><p>　　$('.repeat').addClass('once');</p><p>　　} else if (repeat == 2){</p><p>　　$('.repeat').addClass('all');</p><p><b&

126、gt;　　}</b></p><p>　　$('.repeat').on('click', function(){</p><p>　　if ($(this).hasClass('once')){</p><p>　　repeat = localStorage.repeat = 2;</p>

127、<p>　　$(this).removeClass('once').addClass('all');</p><p>　　} else if ($(this).hasClass('all')){</p><p>　　repeat = localStorage.repeat = 0;</p><p>　　$(t

128、his).removeClass('all');</p><p><b>　　} else {</b></p><p>　　repeat = localStorage.repeat = 1;</p><p>　　$(this).addClass('once');</p><p><b

129、>　　}</b></p><p><b>　　});</b></p><p>　　$('.shuffle').on('click', function(){</p><p>　　if ($(this).hasClass('enable')){</p><p&g

130、t;　　shuffle = localStorage.shuffle = 'false';</p><p>　　$(this).removeClass('enable');</p><p><b>　　} else {</b></p><p>　　shuffle = localStorage.shuffle =