緒論鑒于中國的技術進步和進展，越來越多的電腦和移動智能手機被使用，加速了性能的提高。對移動電話的要求也變得越來越復雜。網(wǎng)站和應用程序正在蓬勃發(fā)展，新的視頻節(jié)目，音樂家的迭代和更新都是重要的指數(shù)創(chuàng)造，并注入新鮮血液【1】，豐富人們的日常生活和精神世界。在這種情況下，許多不同的方面不得不越來越頻繁地回應在硬件方面的要求，無論是通過開發(fā)具有最新趨勢的新設備，還是通過用戶對高質量音樂的渴望，對放松和滿足產生渴望。這就是為什么已經發(fā)明了音樂共鳴器，可以在世界范圍內合理地找到。所以現(xiàn)在音樂設備是我們國家最重要的設備之一。本文主要是參考目前流行的某移動版的客戶端，在此基礎上進行進一步優(yōu)化設計，現(xiàn)階段設置一些基礎功能：實現(xiàn)歌曲的播放和停止，上下多首歌曲切換，查詢播放歌曲的歌手和專輯信息，收藏歌曲，設置鈴聲，選擇歌曲的多種播放模式。同時，根據(jù)在使用過程中用戶交互效果進行測試，通過利用Vue-cli，Vuex，Vue-router與axios等組件進一步對系統(tǒng)進行優(yōu)化和設計，實現(xiàn)匹配的路由功能【2】，該客戶端使用Vue-cli搭建整體框架，使用jsonp和axios實現(xiàn)服務端通訊，利用better-scroll完成移動端滾動庫，達到用戶能夠點擊驗證的目的，最終實現(xiàn)歌曲的播放、停止以及其他功能。為了滿足更好的用戶體驗，使用多個內部組件進行相互作用，使歌曲與歌手以及歌詞相匹配，避免丟失音樂列表或者歌手列表，同時也避免其重復【3】。以實現(xiàn)音樂進程的精準控制，實現(xiàn)播放暫停，以及其他效果。

2移動音樂播放器的設計目標和需具備的功能2.1音樂播放器的設計目標本文要實現(xiàn)的設計目標很簡單，就是通過該播放器為世界上的用戶提供更好的聽覺體驗和使用感受，設計功能控制的音樂設備，以改善音頻和用戶感知的方式，使用戶可以選擇自己的歌曲而無需移動數(shù)據(jù)。因此，移動音樂播放器的最終實現(xiàn)用戶是所有人，在人們空閑的時間，打開手機點開音樂播放器軟件，就可以播放喜歡的音樂，享受這種體驗【4】。音樂播放器的設計應該秉承簡單、方便的設計理念，避免過多的功能，使用過程中不必要的操作，為用戶帶來更多的好處，增加用戶的使用體驗【5】。目前，市面上我們可以搜索到成千上萬的移動播放器，其功能大同小異，最受歡迎的幾款移動音樂播放器，其最大的特點是應用頁面簡約，用戶打開播放器之后，然后簡單地按下一個按鈕就能聽他們喜歡的音樂，同時，這些應用程序可以在用戶尚未登錄參與的情況下播放，極大程度上方便了用戶的選擇。我們設計的播放器功能簡單，對特定設備的要求很低，這使得能夠避免一些設備無法運行該播放器的現(xiàn)象。同時這款移動音樂播放器和傳統(tǒng)手機播放器相比，開發(fā)成本會小很多，后期管理費用也較低【6】。只需要前端開發(fā)技術，就能開發(fā)出一款功能完善同時具備操作簡單這個優(yōu)點的移動音樂播放器，并且不需要用戶耗費更多的流量和時間去下載這款音樂播放器，目標是為大眾提供最好的用戶體驗。2.2完成移動音樂播放器需具備的功能首先，要求設計者能夠熟練使用Vue-cli和Vue，利用其為媒介快速并且較為準確地開發(fā)Vue-cli腳手架工具和Vue-js框架，其次，熟練使用HTML5+CSS3，在簡單處理UI設計圖的基礎上，將其完整實現(xiàn)，能夠發(fā)現(xiàn)并處理瀏覽器的兼容環(huán)境問題；加之，一定程度上掌握JavaScript這個直譯式腳本語言，在頁面中，簡潔明了地實現(xiàn)一些沒有特效和邏輯的系統(tǒng)操作；最后，熟練使用ajax進行異步請求也是一種必不可少的能力，還有熟知node.JS，對系統(tǒng)管理命令提示符輸入框中可以輸入的每句話意思了如指掌。當然，還有一些或多或少都需要的技能，這里就不多加贅述了。為了實現(xiàn)前端的可視化，需要使用一個用于開發(fā)移動音樂作品的Vue.js前端技術實用框架，用來進行移動音樂播放器的開發(fā)使用。而這個前端技術框架還是用HTML5、CSS3、JavaScript構建的，它提供了許多功能，能夠實現(xiàn)許多功能，比如能使用node.js服務端數(shù)據(jù)交互，同時實現(xiàn)HTML5的localStorage的存儲。Ajax能夠實現(xiàn)移動音樂播放器的數(shù)據(jù)請求，ajax是一種新興的發(fā)展的Web表示層技術，能夠以數(shù)據(jù)應用為框架和基礎，滿足用戶的使用需求，通過它可以構建一個動態(tài)、快速并且靈活的Web應用系統(tǒng)程序，該程序能夠獨立于網(wǎng)頁的服務端，且被動態(tài)寫入。Ajax能夠滿足更新要求，網(wǎng)頁實現(xiàn)較為快速的異步更新，和服務器在一定程度上，實現(xiàn)以數(shù)據(jù)為基礎的交換【7】。在某種程度上消除了對網(wǎng)頁的依賴性，在http數(shù)據(jù)請求的基礎上，不需要考慮數(shù)據(jù)交互的問題。因此，該播放器的數(shù)據(jù)能夠滿足客戶的使用體驗，只用音樂播放，不涉及用戶隱私，在一定程度上確保安全，并且建立移動音樂播放器的開發(fā)管理模式，與此同時，它還具有極強的穩(wěn)定性和實用性。

3開發(fā)環(huán)境及開發(fā)工具介紹該軟件是在windows10的系統(tǒng)下，使用jsonp在傳統(tǒng)音樂軟件接口扒取，獲取真實后臺數(shù)據(jù)，利用SublimeText3編輯器和better-scroll移動端插件，在node.js基礎上，用vuex狀態(tài)管理進行項目結構設計。3.1SublimeText3簡介SublimeText作為一個高效的文本編輯器，還具有漂亮和簡潔的用戶管理界面。它擁有極其豐富的功能，是一個輕量級的編輯器【8】，能夠縮略代碼圖，也能夠跨平臺運行。用戶可以利用它使用python插件，或者插入代碼片段。在簡潔高效方面，它也有一番成就。為了方便，用戶可以使用自定義鍵，自主設置菜單和工具條，它具有完整的PythonAPI和goto功能。當然，它還具有文本編輯器最基本的特點，類似wps，能夠進行拼音檢查和書簽設置，能夠多選和打開多窗口等等功能。同時，它也是一個跨平臺的編輯器，以某種方式能夠支持許多操作管理系統(tǒng)，類似于Linux、MacOSX等。SublimeText的優(yōu)點很多：1、擴展功能較好，因此又被稱為安裝包；2、具有強大的按鍵快捷命令功能，在這個文本編輯器中，能夠實時搜索到相應的命令、選項，得到所需地代碼片段和對應的語法，然后用戶只需按回車鍵就可以立即執(zhí)行，這在很大程度上能夠減少搜索量；3、能夠進行即時文件交換的優(yōu)點。能夠隨意執(zhí)行跳轉任務，到達任何文件中；4、具有多選功能。允許多個光標同時出現(xiàn)在同一個頁面上；5、具有快速更新的優(yōu)點；6、能夠支持VIM模式，支持宏，簡單來說就是支持用戶記錄操作，在另一方面用戶可以嘗試自己編寫命令，然后會自動播放被記錄的動作或命令；。3.2Node.JS簡介Node.js是用于服務器端執(zhí)行JavaScript語言的工作平臺。Node.js不是一種語言，同時它也不是JavaScript的一個框架。與PHP、JSP、Python、Perl、Ruby這些語言和平臺不同，node.js在Chrome的V8引擎上運行，使用JavaScript進行編程操作。Node.js的設計理念與傳統(tǒng)架構有很大不同，它獨立于其他服務器的系統(tǒng)軟件，具有良好的擴展性。但是也存在一些問題，Node.js并沒有相應的網(wǎng)絡容器。Node.js的優(yōu)點：1.首先，JavaScript語言在服務器上運行，這種語言以Node為基礎，Node在某種意義上有點像JavaScript虛擬機；2.Node生態(tài)系統(tǒng)與其他系統(tǒng)相比更加活躍，有大量的開源庫可提供，允許JavaScript語言與操作系統(tǒng)互動（例如，讀寫文件，子進程的新構造）。因此，可以想見，Node是一個屬于JavaScript的工具庫。3.3Vue.js簡介Vue.js是目前最流行的一套MVVMJavaScript庫，是一套新型架構框架，可被用來構建用戶界面。它既擁有MVP框架的優(yōu)點，也繼承了WPF的新特性。它的基本原則是使用自底向上的增量開發(fā)設計，利用數(shù)據(jù)驅動的方法來構建框架。Vue.js的優(yōu)勢：1.與Angular.js相比，API能夠被Vue.js更加簡潔快速地提供，并且易于被大眾所理解，對于普通人來說，能夠更快地學習新內容并學會，更加準確地使用Vue.js；2.在Angular1中，應用范圍內的每一個數(shù)據(jù)變化都會引起觀察者的新計算。Angular封裝了常見的Dom事件、XHR事件等，在這些事件中可以觸發(fā)對Angular摘要的訪問；3.在合成過程中，Angular會從rootscope滾動并開始檢查所有監(jiān)視器。此外，如果有可以觸發(fā)其他更新的觀察者，臟檢查周期可以被多次執(zhí)行。但相對來說，Vue并不存在這個問題，它以依賴性跟蹤和異步隊列為基礎，更新系統(tǒng)。當然，在數(shù)據(jù)之間有明確表示的依賴關系的前提下，任何數(shù)據(jù)變化都會被獨立處罰。

4移動音樂播放器的設計與實現(xiàn)4.1程序設計首先，建立Vue項目需要借助Vue-cli。如圖4.1。在開發(fā)者創(chuàng)建web-music項目管理后，Vue-cli就會進入項目運行的目錄，此時選擇下載服務項目的所需模塊。下載成功以后，用戶可以直接運行這個項目，在管理員命令提示框中，輸入npmrundev的指令。在附加框中，選擇CommandPrompt這一選項。在程序地址后的顯示框中，輸入yarnstart指令。等待程序加載完成后，復制屏幕顯示的網(wǎng)址:8081，將替換成localhost，意味著在本地服務器中，8081號端口能夠被監(jiān)聽到，于是在瀏覽器中就會顯示出一個listenworld程序。項目搭建完成以后，就會立刻執(zhí)行，如圖4.2所示。此時管理員命令提示框（win+R）會在顯示器中跳出，然后需要開發(fā)者在該框中輸入npmrundev指令，按Enter鍵確認后，加載后瀏覽器就能自動開啟并運行管理項目，網(wǎng)絡路由技術能夠實現(xiàn)項目的頁面跳轉需求，而在SRC目錄下的router.js中路由能被正確配置。項目運行后，需要打包項目，用戶要在命令符提示框中輸入npmrunbuild指令。加載完成后，項目目錄中，會提供一個生成的dist文件夾，兩個index.html文件和靜態(tài)文件夾。在這之間，靜態(tài)文件夾包含了所有的基本資源文件，但不包括編譯后的主頁面，也不包括壓縮后的主頁面，index擁有超文本標記語言，生成該應用需要的主頁，管理者只需一個操作就可進入其中。進行部署操作時，在后期階段，管理者上傳所需，即文件夾名字為dist的，提交給服務器。使用者在后期能夠減少使用成本和開銷，同時該項目執(zhí)行的速度在一定程度上也能得到提高。結束

開啟瀏覽器運行項目Y開始結束

開啟瀏覽器運行項目Y開始登錄輸入執(zhí)行命令是否存在腳本搭建項目N開始創(chuàng)建web-music項目下載所需模塊輸入命令

打開瀏覽器

監(jiān)聽端口

顯示Vue項目

結束圖4.2執(zhí)行Vue項目流程圖移動音樂播放器的主要實現(xiàn)功能有以下這些，如下表4-1所示：（1）播放器的基本控制需求播放器的基本控制要求由三部分組成，包括播放、停止、上一首、下一首。播放：點擊播放列表，用戶可以選擇想聽的歌曲。在歌曲播放時，歌曲名稱、歌手名稱和專輯圖片都會顯示在頁面中央，雙擊頁面會出現(xiàn)該歌曲對應的歌詞。停止：點擊音樂列表中屏幕底部的圓形按鈕。當歌曲處于播放模式中，點擊該按鈕，歌曲將立刻停止。上一首、下一首功能：在音樂列表中點擊屏幕底部的兩個三角形符號，左邊是上一首，右邊是下一首。（2）播放列表管理需求進入播放列表上“…”狀的按鈕，可以選擇查看歌手相關信息，查看專輯相關信息以及將這首歌設置成鈴聲。（3）播放模式需求用戶可以選擇多種播放魔術：單曲循環(huán)、播放列表歌曲順序播放、播放列表歌曲隨機播放等等。音樂播放器還應該滿足頁面設計的需要，具有優(yōu)秀的用戶使用感，主要體現(xiàn)在：簡潔明了的界面：清晰直觀的應用界面，視覺上有良好的布局，設計合理，使用方便，能一眼找到想要的功能按鈕；快速響應：能夠在短時間內完成用戶請求，以及及時反饋耗時原因。與此同時，該播放器還需要一些其他板塊，如排行榜模塊，包括熱門音樂排行榜、熱度飆升榜、人氣音樂流行榜等。通過大數(shù)據(jù)的整合，用戶可以實時了解歌曲的受歡迎程度，并可以根據(jù)自己的不同需求點擊相關模塊。在歷史搜索模塊中，用戶點擊“我的”中的搜索框可以找到過去搜索過的歌曲，方便了因時間間隔而沒有保存歌曲的情況。表4-1移動音樂播放器實現(xiàn)需求表音樂播放器主要實現(xiàn)需求功能操作說明主要控制需求播放單擊播放列表，隨機選擇屏幕中的歌曲，或者搜索喜歡的歌曲，點擊歌曲右側的播放鍵，歌曲得到播放停止系統(tǒng)處于播放狀態(tài)時，點擊歌曲列表上一個圓形按鈕上一首、下一首選擇單擊歌曲列表左右兩側的兩個三角形符號播放列表管理需求歌手、專輯信息點擊播放列表上“…”狀的按鈕歌曲設為鈴聲播放模式管理需求列表隨機播放如果想要選擇某一模式，單擊歌曲頁面下端選擇任意所需。列表循環(huán)播放單曲循環(huán)播放頁面設計需求界面簡潔直觀布局合理其他需求排行榜模塊點擊首頁“最新流行”歷史搜索記錄點擊搜索框下方彈出的界面4.2程序實現(xiàn)歌曲頁面的源碼import{commonParams}from'./config'importaxiosfrom'axios'exportfunctiongetLyric(mid1){consturl='/api/lyric'constdata=Object.assign({},commonParams,{songmid:mid,platform:'yqq',hostUin:1,needNewCode:1,categoryId:1000,pcachetime:+newDate(),})returnaxios.get(url,{params:data}).then((res)=>{returnPromise.resolve(res.data)})};/*獲取播放源連接密鑰*/exportfunctiongetVkey(songmid){consturl='/api/vkey'constdata=Object.assign({},commonParams,{filename:`C400${songmid}.m4a`,guid:"1472321272",uin:0,platform:'listen',needNewCode:0,cid:"207341753",format:'jsonp'})returnaxios.get(url,{params:data})}returnjsonp(url,data,options)}

5測試音樂播放是這個項目最重要和最核心的功能?，F(xiàn)在，介紹一下這個模塊的詳細測試報告。該播放器包括歌手檢索的顯示界面圖（見圖5.1）；播放器的主界面圖（見圖5.2）；流行歌曲列表的推薦名單（見圖5.3）；播放數(shù)據(jù)頁面的界面圖（見圖5.4)；此外，還對音樂播放器的穩(wěn)健性和遇到緊急情況突發(fā)反應等性能方面進行了詳細測試，如下表5-1所示。本文設計實現(xiàn)的是基于Vue的移動音樂播放器，這是一段發(fā)現(xiàn)問題、分析問題最后解決問題的過程，從需求分析、總體設計，再到具體功能的實現(xiàn)，通過不斷細化和完善，致力于提高用戶的使用體驗，于是這款音樂播放器具有多樣的功能，更加簡單，便于使用，能夠基本達到本課題要求的設計目標。與市場上現(xiàn)有的音樂播放器相比，本文旨在從功能性、易用性和卓越性這三方面來詳細描述實現(xiàn)音樂播放器的優(yōu)異性：（1）UI設計的應用更加簡潔易用，設計的主界面直觀清晰，便于用戶迅速找到所需界面，音樂播放器集中在播放詳情頁，避免了UI的冗余設計。（2）設計了播放列表頁面，允許用戶根據(jù)自己的喜好選擇不同的歌單，提高了用戶的使用體驗；設計了歷史搜索引擎功能，能夠利用快速定位，迅速搜索到所需文件。圖5.1藝術家檢索展示列表圖5.2播放器主界面（“熱門歌單”推薦界面）圖5.3熱門歌曲推薦列表圖5.4播放詳情頁的界面圖（3）設計在線音樂播放和設置為鈴聲功能。因此，該應用程序不是孤立的，而是作為大量音樂資源的入口，用戶打開應用程序就像進入了音樂海洋，實現(xiàn)了與互聯(lián)網(wǎng)的融合。在開始軟件的測試之前，需要制定一個較為合理的測試計劃，這個操作目的是盡可能多地發(fā)現(xiàn)程序中存在的問題。為了實現(xiàn)測試的應用程序能夠成功運行，確保用戶隱私不被泄露，所以選擇的測試范本應該可靠，還要具備全面的優(yōu)點。要根據(jù)現(xiàn)階段用戶需求、產品需要，在合理的范圍內，測試者需有條理地選擇之于測試的方法。在測試的全過程中，該應用程序應保持完整且不存在更改。對該項目制作的音樂播放器功能進行檢測，以此選擇幾個重要方向，有推薦熱門歌單的頁面，有歌手集合頁面，有最新歌曲的排行，還測試了搜索歌曲，當然必不可少的是歌曲播放和暫停的實驗。表5-1該應用程序性能測試表測試方向得出結果播放功能，暫停功能能夠實現(xiàn)，在不同時間不同歌曲上進行測試未發(fā)現(xiàn)卡頓播放形式順利實現(xiàn)，在多種播放模式可供選擇，有單曲循環(huán)播放模式，有列表循環(huán)播放魔術，有列表隨機播放模式等等。上一首歌曲切換，下一首歌曲切換能順利實現(xiàn)所需功能，切換至所需歌曲定位進度條順利實現(xiàn)，鼠標任意點擊想要跳至的歌詞點，歌曲都會從該點開始，繼續(xù)播放創(chuàng)建歌單用戶右擊想要添加的歌曲，選擇加入歌單，若發(fā)現(xiàn)歌單未被創(chuàng)立，則系統(tǒng)自動生成默認歌單，用戶可自主添加歌單名刪除歌單順利實現(xiàn)添加歌曲至歌單順利實現(xiàn)多選一鍵播放選擇歌單中想聽的歌曲，一并加入到新生成的播放列表，歌曲能順利播放本地搜索歌曲若本地存在該歌曲，正確返回歌曲記錄；若不存在，返回空的結果列表根據(jù)上述測試得出結論，該應用程序功能完善，能應對一些突發(fā)情況，系統(tǒng)于實現(xiàn)操作應答上的速度，在可接受的閾值內。該程序也滿足了用戶所需的基本需求，并在一定程度上，對用戶的隱私有保護功能。

6總結本文的主要工作是在深入研究Vue.js語言框架和移動開發(fā)技術的基礎上，設計并實現(xiàn)一個基于Vue、功能豐富、用戶體驗良好的移動音樂播放器。本文的工作主要成果如下：對Android開源系統(tǒng)技術進行了深入研究，隨后對Java語言和Androidstudio可視化開發(fā)工具進行了深入細致的研究；通過對Vue-cli和Vue的研究，以其為手段，快速、相當準確地開發(fā)了Vue-cli腳手架工具和Vue-js框架，實現(xiàn)了前端可視化界面。深入研究HTML5+CSS3，在簡單處理UI設計的基礎上，充分實現(xiàn)它，能夠發(fā)現(xiàn)和處理瀏覽器環(huán)境的兼容性問題，同時對字面的JavaScript腳本語言、數(shù)據(jù)交互功能的實現(xiàn)等有一定的了解。移動音樂播放器的前提是，用戶使用可以簡單而安全，不需要個人用戶隱私，以用戶體驗原則為先。它是一個單頁應用程序，允許用戶實現(xiàn)基于手機和互聯(lián)網(wǎng)的"即用即走，即用即走"的需求，能夠不涉及用戶信息，確保安全，只用于音樂播放。移動音樂播放器的操作比較簡單有幾個原因，其中最重要的是，移動音樂播放器基于用戶的請求，來實現(xiàn)數(shù)據(jù)響應。而這方面的問題，只需要開發(fā)者和管理員考慮，即用戶不需要擔心。在管理員進行的模擬測試中，保證應用程序可以正常訪問，并且穩(wěn)定運行。與手機中傳統(tǒng)的原生軟件相比，該音樂播放器軟件的開發(fā)成本遠低于原生軟件，也不需要更多的管理費用，只需要具備前端開發(fā)技術，通過探索就可以移動一個音樂播放器，一個和手機本身類似的本地社交網(wǎng)絡服務，用戶不需要下載新的應用版本進行安裝。占用流量配額，無論是維護還是更新這個應用都只需要管理員在服務器端更新相關文件，與傳統(tǒng)的手機音樂播放器相比，能夠為客戶帶來更多更好的體驗，是一個簡單而又極其實用的產品。本文通過對Vue.js框架的深入研究，對移動多媒體開發(fā)有了深刻的認識。本文的目的是實現(xiàn)一個基于vue的移動音樂播放器，支持音樂播放。但由于時間有限，個人的學習和能力有限，本文所設計的系統(tǒng)還有很多優(yōu)化和改進的空間。例如，在播放音樂時，你可以添加播放相應的視頻。此外，在功能上，本文所設計的音樂播放器仍有著很大的優(yōu)化空間，等待著我們去豐富，當然出現(xiàn)這種問題也很正常，沒有任何軟件產品是不需要長期維護的，也需要開發(fā)者不斷改進軟件性能以適應時代的發(fā)展。畢竟對于開發(fā)者來說