基于Web的音樂播放器前端的設(shè)計與實(shí)現(xiàn)

林陳佑康 王風(fēng)碩

摘要：隨著互聯(lián)網(wǎng)的不斷發(fā)展進(jìn)步，網(wǎng)絡(luò)逐漸成為人們?nèi)粘Ｉ畹谋匦杵?，加上生活?jié)奏的不斷加快、生活壓力的增大，聽音樂也成為人們娛樂、放松的主要方式之一。該文闡述了基于Web開發(fā)的一個在線的音樂播放器網(wǎng)站前端的設(shè)計與開發(fā)，主要使用了Vue.js框架，應(yīng)用Element-UI組件，完成了整個在線音樂播放器網(wǎng)頁的前端頁面搭建，是一個可以實(shí)現(xiàn)用戶自定義注冊、登錄賬號，可以自由聽、搜索和收藏音樂，評論歌曲的在線音樂播放器網(wǎng)站。

關(guān)鍵詞：前端開發(fā);Vue.js;Element-UI;音樂播放器

中圖分類號：TP311? ? ?文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）36-0089-03

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

1引言

在互聯(lián)網(wǎng)不斷高速發(fā)展的當(dāng)下，人們的聽歌模式已經(jīng)從傳統(tǒng)的線下設(shè)備改變到數(shù)字音樂，數(shù)字音樂是依托互聯(lián)網(wǎng)技術(shù)傳播和存在的，它可以很方便地被下載、播放、傳播、復(fù)制等[1]。人們想在現(xiàn)在這樣的快節(jié)奏的生活方式中，找到良好的消遣、放松心情的方法，而聽音樂正是目前娛樂的主要的方式之一，隨著聽音樂的用戶群體數(shù)量越來越大，導(dǎo)致用戶對音樂播放平臺有各種各樣的需求，所以構(gòu)建與開發(fā)一個在線音樂播放器，是當(dāng)今社會的必要需求。

在線音樂播放器網(wǎng)站的開發(fā)，對于每一個用戶來說，既沒有大量的廣告干擾，還可以找到符合自己聽歌口味的歌曲，由于是數(shù)字音樂，所以其音質(zhì)也不會被改變，這樣就可以有一個良好的聽歌體驗。網(wǎng)站基于用戶的多樣化的需求，讓自身的定位更加明確，給用戶帶來更良好的使用體驗。

2 技術(shù)選型

目前，在Web的開發(fā)中，普遍采用前后端分離的技術(shù)進(jìn)行實(shí)現(xiàn)，在前端的技術(shù)中，主要有Angular、React、Vue[2]。而本文前端的開發(fā)主要使用的是Vue.js框架，加上Element-UI組件庫，再搭配上JavaScript、CSS等技術(shù)，來實(shí)現(xiàn)了整個在線音樂播放器網(wǎng)頁的前端的布局、樣式以及交互操作。

Vue.js：這是一個輕巧、高性能、可組件化的MVVM庫，其主要特征在于靈活性突出具有良好的使用性能[3]。Vue.js作為一個構(gòu)建數(shù)據(jù)驅(qū)動的漸進(jìn)式JavaScript框架，采用的是自底而上的增量開發(fā)的設(shè)計。Vue的核心庫只關(guān)注圖層，能讓網(wǎng)頁的前端開發(fā)更加容易，并且十分容易學(xué)習(xí)，還可以與其他的庫或者已完成的項目進(jìn)行整合。同時Vue.js還提供vue-cli腳手架，所以構(gòu)建一個新項目并運(yùn)行起來是十分輕松的。

Element-UI：這是基于Vue的一個ui框架，該框架基于Vue.js提供了很多已經(jīng)封裝好的組件庫，其基本涵蓋了前端頁面所需的所有組件，可以方便我們快速開發(fā)前端頁面。因為Element-UI使用簡單的特點(diǎn)，所以其提供的組件的參考實(shí)例代碼都可以直接進(jìn)行復(fù)制，并粘貼到自己所構(gòu)建的項目中使用。

3 需求分析

隨著互聯(lián)網(wǎng)的不斷進(jìn)步，使得網(wǎng)絡(luò)成為人們生活中的必需品，再伴隨生活節(jié)奏的加快，聽音樂成為人們消遣、娛樂，減輕疲勞，放松，休息的主要方式之一。所以開發(fā)一個在線的音樂播放器網(wǎng)頁來讓人們放松，拓寬人們的娛樂方式是大勢所趨。本在線音樂播放器的目標(biāo)受眾是所有使用電腦端的用戶，而目標(biāo)受眾基本覆蓋了每個年齡階段的用戶，所以本在線音樂播放器以操作簡單易行、功能完備、頁面清爽易懂為目的進(jìn)行設(shè)計與開發(fā)，以滿足各個年齡層的用戶的基本需求。目前國內(nèi)的市場上存在各種各樣的音樂播放器，每個音樂播放器都有自己的特點(diǎn)，而本在線音樂播放器參考了當(dāng)下市場最熱門的同類型的音樂播放器平臺的設(shè)計，把基本的需求大致分為：用戶的注冊、登錄，用戶管理，評論管理，收藏管理，歌曲管理等。

4 功能模塊分析

本在線音樂播放器網(wǎng)站的開發(fā)主要分為了五個部分：用戶安全管理模塊，評論管理模塊，歌曲管理模塊，收藏管理模塊，數(shù)據(jù)庫管理模塊。用戶安全管理模塊包括用戶賬號注冊，登錄賬戶，用戶注銷，用戶個人主頁。評論管理模塊包括用戶在歌曲詳情頁發(fā)布評論，刪除評論，回復(fù)評論。歌曲管理模塊包括播放歌曲、MV，切換歌曲，歷史聽歌記錄歌單，檢索歌曲、歌手等，推薦實(shí)時最新發(fā)布的歌曲，推薦各種各樣的歌單。收藏管理模塊包括增加歌曲到收藏列表，刪除收藏列表中的歌曲。數(shù)據(jù)庫管理模塊是整個在線音樂播放器網(wǎng)頁的主要數(shù)據(jù)內(nèi)容來源，包括用戶表單，收藏歌單表單，歷史聽歌歌單表單，評論表單。具體功能模塊圖如圖1所示。

5模塊功能設(shè)計

5.1用戶安全管理模塊

5.1.1 注冊

用戶沒有賬號時需要進(jìn)行注冊賬號，當(dāng)用戶點(diǎn)擊注冊按鈕，切換到注冊頁面，輸入自己的賬號密碼后確認(rèn)。后臺獲取輸入的內(nèi)容后傳遞給服務(wù)器并發(fā)送請求。若服務(wù)器請求成功，便把獲取到的內(nèi)容保存到后端數(shù)據(jù)庫的用戶表單里，并返回注冊成功的消息;若請求失敗，則發(fā)送注冊失敗的提示。

5.1.2 登錄

用戶需登錄才能進(jìn)入網(wǎng)站的主頁面，當(dāng)用戶點(diǎn)擊登錄按鈕，切換到登錄頁面，輸入自己注冊的賬號密碼后確認(rèn)。后臺獲取輸入的內(nèi)容傳遞給服務(wù)器并發(fā)送請求。若服務(wù)器請求成功，便把獲取到的內(nèi)容與后端數(shù)據(jù)庫中的用戶表單中保存的賬號密碼進(jìn)行比對，并返回對應(yīng)的結(jié)果;若請求失敗，則提示登錄失敗。

5.1.3 注銷

用戶點(diǎn)擊退出按鈕，即從登錄狀態(tài)變?yōu)榉堑卿洜顟B(tài)，頁面將直接刷新并返回到登錄頁面。

5.1.4 個人主頁

用戶需登錄后才能進(jìn)入個人主頁。用戶可以在個人主頁中看到自己的用戶信息，以及收藏的歌曲歌單。

5.2 歌曲管理模塊

5.2.1 展示

在線音樂播放器首頁的頁面展示，例如首頁上的歌曲推薦板塊、歌單推薦板塊等。點(diǎn)擊每一首歌曲會進(jìn)入到相對應(yīng)歌曲的歌曲詳情頁中，在歌曲的基本信息介紹下方是歌曲的評論區(qū)，用戶可以自由發(fā)布評論或者對其他用戶的評論進(jìn)行回復(fù)評論操作。

5.2.2 檢索

用戶在搜索框輸入需要檢索的內(nèi)容，例如歌曲、歌手等，點(diǎn)擊搜索按鈕后，搜索成功則顯示搜索到的內(nèi)容。若搜索項不存在，則提示消息沒有搜索到相關(guān)的內(nèi)容。

5.2.3 播放

用戶在首頁雙擊歌曲時，可以進(jìn)行音樂的播放;也能在播放器歌單列表中點(diǎn)擊歌曲進(jìn)行播放。可以在播放器中點(diǎn)擊切換播放與暫停。

5.2.4 歌曲推薦

用戶可以在在線音樂播放器首頁中看到實(shí)時最新發(fā)布的歌曲、MV推薦，以及各種各樣的歌單推薦。

5.2.5 切歌

用戶點(diǎn)擊切歌按鈕時，可以進(jìn)行歌曲的上一首或者下一首進(jìn)行切換。把切歌功能進(jìn)行封裝，利用條件判斷是隨機(jī)播放還是順序播放，再判斷是切換上一首還是下一首，最后把歌曲播放時間、進(jìn)度條歸回到原位進(jìn)行播放。切歌功能關(guān)鍵代碼如下。

//歌曲上下首封裝

skipFn（type） {

switch （this.playType） {

case 2： // 隨機(jī)播放

this.index = Math.floor（Math.random（） * this.songList.length）;

break;

default：

if （type == "skipBack"） {

this.index - 1 >= 0 ？ this.index-- ： 0;

} else {

this.index =this.index + 1 >= this.songList.length

？ this.songList.length - 1

： this.index + 1;

}

break;

}

this.song = this.songList[this.index];

this.playing = true;

setTimeout（（） => {

this.totalTime = "00：00";

audio.play（）;

}， 100）;

}，

// 上一首

skipBack（） {

this.skipFn（"skipBack"）;

}，

// 下一首

skipForward（） {

this.skipFn（"skipForward"）;

}，

5.3 評論管理模塊

5.3.1 發(fā)布評論

用戶在歌曲詳情頁中的評論區(qū)，輸入評論的內(nèi)容，點(diǎn)擊發(fā)布按鈕時，后臺獲取評論信息并向服務(wù)端發(fā)送請求。若服務(wù)器請求成功，評論的信息會獲取當(dāng)前發(fā)布的時間并發(fā)布到評論區(qū)內(nèi)，同時傳遞到后端數(shù)據(jù)庫保存到評論表單中;若請求失敗，則提示發(fā)布失敗。

5.3.2 刪除評論

用戶可以在評論區(qū)看到自己發(fā)布的評論，點(diǎn)擊刪除按鈕進(jìn)行刪除操作，同時在數(shù)據(jù)庫的評論表單中刪除當(dāng)前用戶的評論信息。

5.3.3 回復(fù)

用戶可以在評論區(qū)看到所有已發(fā)布的評論，點(diǎn)擊回復(fù)按鈕進(jìn)行評論的回復(fù)或者評論其他用戶的評論，回復(fù)的評論信息也會被保存在數(shù)據(jù)庫的評論表單中。

5.4 收藏管理模塊

5.4.1 添加收藏

用戶在歌曲詳情頁中的點(diǎn)擊收藏按鈕時，收藏的歌曲的信息會保存到數(shù)據(jù)庫中的收藏歌曲表單中，并且會顯示在個人主頁的收藏歌曲列表中。

5.4.2 刪除收藏

用戶可以在個人主頁的收藏歌曲列表中看到自己已經(jīng)收藏的歌曲，點(diǎn)擊刪除按鈕進(jìn)行刪除操作。

5.5 數(shù)據(jù)庫模塊

導(dǎo)入用戶表單、收藏歌曲表單、歷史聽歌歌單表單、評論表單到數(shù)據(jù)庫中。數(shù)據(jù)庫ER圖如圖2所示。

6 結(jié)束語

本文基于Web構(gòu)建的音樂播放器前端的設(shè)計與實(shí)現(xiàn)，在線音樂播放器網(wǎng)頁的雛形和大部分功能已經(jīng)基本實(shí)現(xiàn)，滿足了用戶使用在線音樂播放器的基本需求。通過使用Vue.js框架開發(fā)的在線音樂播放器網(wǎng)頁前端，不僅可以合理地布局，還可以方便維護(hù)網(wǎng)站各個模塊。同時本在線音樂播放器還可以進(jìn)行更進(jìn)一步的深度的研究與開發(fā)，例如根據(jù)每個用戶的大數(shù)據(jù)分析與推送，移動端的App開發(fā)等。所以在后續(xù)的工作過程中，將不斷地完善、優(yōu)化該在線音樂播放器網(wǎng)站，致力于提高用戶黏性，從而提高本在線音樂播放器的價值，給用戶帶來更好的使用體驗。

參考文獻(xiàn)：

[1] 劉偉.淺談改革開放以來數(shù)字音樂的產(chǎn)業(yè)化發(fā)展[J].產(chǎn)業(yè)科技創(chuàng)新，2020，2（5）：5-8.

[2] 陶琳.基于Spring Boot和Vue框架的高校實(shí)驗室耗材管理系統(tǒng)的分析與設(shè)計[J].電腦知識與技術(shù)，2021，17（13）：83-85.

[3] 沈皎佶.Vue.js技術(shù)在移動應(yīng)用可視化平臺網(wǎng)頁設(shè)計中的應(yīng)用[J].數(shù)碼世界，2020（9）：96-97.

【通聯(lián)編輯：梁書】