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

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

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

3、我們無時無刻不與網(wǎng)絡接觸。過去，我們都是通過磁帶、CD、等方式來聽音樂?，F(xiàn)在人們不再滿足于單調(diào)的文字或者圖像，而希望能在網(wǎng)上傳輸音樂、試聽音樂。</p><p>　　【關鍵詞】Dreamweaver、音樂、多媒體、網(wǎng)站設計、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>　?。ǘ┍菊n題研究的意義6</p><p>　　（三）音樂網(wǎng)站國內(nèi)外現(xiàn)狀7</p&

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

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

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

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

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

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

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

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

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

16、讓人們在工作之后可以進行休閑的娛樂。</p><p>　　因為寬帶用戶的增加，帶動了互聯(lián)網(wǎng)音樂產(chǎn)業(yè)的蓬勃興起。無論國內(nèi)還是國外，音樂網(wǎng)站市場都呈現(xiàn)一派生氣。目前，音樂網(wǎng)站從傳播形式來看，大致可分為三類：有固定網(wǎng)址的音樂網(wǎng)站、搜索類音樂網(wǎng)站、P2P類音樂網(wǎng)站，三者功能各異，互為補充。近年來,全球數(shù)字娛樂業(yè)持續(xù)發(fā)展。網(wǎng)絡傳播以其特有的快速、高效、便捷的傳輸方式被人們所接受，越來越多的走進了大家。并 且在當今

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

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

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

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

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

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

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

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

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

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

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

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

29、Hand，或Photoshop等檔案移至網(wǎng)頁上。使用檢色吸管工具選擇螢幕上的顏色可設定最接近的網(wǎng)頁安全色。對於選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。Dremweaver能與您喜愛的設計工具，如Playback Flash，Shockwave和外掛模組等搭配，不需離開Dremweaver便可完成，整體運用流程自然順暢。除此之外，只要單擊便可使Dreamweaver自動開啟Firework或Photoshop來進行編輯與設定圖

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

31、擬的控制能力</p><p>　　是唯一提供Roundtrip HTML、視覺化編輯與原始碼編輯同步的設計工具?？梢匀轿坏某尸F(xiàn)在任何平臺的熱門瀏覽器上。</p><p>　　2. HTML5簡介</p><p>　　HTML 5是近十年來Web開發(fā)標準最巨大的飛躍。和以前的版本不同，HTML 5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的新使命是將Web帶入一個成熟的應用平臺

32、，在HTML 5平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。</p><p>　　什么是 HTML5?</p><p>　　HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標準。</p><p>　　HTML 的上一個版本誕生于 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）新特性應該基于 HTML、CSS、DOM 以及 Jav

34、aScript。</p><p>　　（2）減少對外部插件的需求(比如 Flash)</p><p>　?。?）更優(yōu)秀的錯誤處理</p><p>　?。?）更多取代腳本的標記</p><p>　?。?）HTML5 應該獨立于設備</p><p>　　（6）開發(fā)進程應對公眾透明</p><p>　

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

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

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

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

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

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

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

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

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

44、;/p><p>　　音樂查找是音樂網(wǎng)站的核心，音樂網(wǎng)站應該提供按照音樂名和音樂出品人查找這兩種最基本的音樂查找方式，除了這兩種基本查找音樂方式外還應有按照專輯查找，按音樂類型查找，按音樂地區(qū)查找等查找方式。音樂查找結(jié)果最后列表顯示，用戶點擊對應屬性鏈接可以實現(xiàn)按照這個屬性查找或者排序。點擊對應的音樂名可以試聽音樂。</p><p><b>　?。ǘ┬阅苄枨?lt;/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)設計</b>

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

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

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

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

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

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

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

53、對比較簡單。因為專輯英語音樂術語“多對多”關系，所以在此表中不設置與音樂的關聯(lián)，將關聯(lián)寫至Cm表，Cliplist表結(jié)構(gòu)如表4-3-4所示。</p><p>　　表4-3-4  Cliplist表結(jié)構(gòu)</p><p>　?。?）Cm表：該表是music表和cliplist表的關系表，用來處理音樂和專輯的關系，這里一個音樂作品可以屬于多個專輯，同時一個專輯包含多個音樂作品。Clip

54、list表結(jié)構(gòu)如表4-3-5所示。</p><p>　　表4-3-5 Cm表結(jié)構(gòu)</p><p>　　五、代碼實現(xiàn)與運行圖</p><p>　　（一）創(chuàng)建CSS文件</p><p>　　樣式定義，統(tǒ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實現(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: '格子兮、牙牙樂',</p><p>　　album: '格子兮、牙牙樂 - 秋殤別戀.mp3',</p><p>　　c

74、over:'img/1.jpg',</p><p>　　mp3: 'mp3/格子兮、牙牙樂 - 秋殤別戀.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: '漂洋過海來看你',</p><p>　　artist:

79、 '丁當',</p><p>　　album: '漂洋過海來看你 - 丁當.mp3',</p><p>　　cover: 'img/4.jpg',</p><p>　　mp3: 'mp3/漂洋過海來看你 - 丁當.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 =