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

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

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

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

中圖分類號：TP311? ? ?文獻標識碼：A

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

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

1引言

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

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

2 技術(shù)選型

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

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

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

3 需求分析

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

4 功能模塊分析

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

5模塊功能設(shè)計

5.1用戶安全管理模塊

5.1.1 注冊

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

5.1.2 登錄

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

5.1.3 注銷

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

5.1.4 個人主頁

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

5.2 歌曲管理模塊

5.2.1 展示

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

5.2.2 檢索

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

5.2.3 播放

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

5.2.4 歌曲推薦

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

5.2.5 切歌

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

//歌曲上下首封裝

skipFn（type） {

switch （this.playType） {

case 2： // 隨機播放

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)容，點擊發(fā)布按鈕時，后臺獲取評論信息并向服務(wù)端發(fā)送請求。若服務(wù)器請求成功，評論的信息會獲取當前發(fā)布的時間并發(fā)布到評論區(qū)內(nèi)，同時傳遞到后端數(shù)據(jù)庫保存到評論表單中;若請求失敗，則提示發(fā)布失敗。

5.3.2 刪除評論

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

5.3.3 回復(fù)

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

5.4 收藏管理模塊

5.4.1 添加收藏

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

5.4.2 刪除收藏

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

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

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

6 結(jié)束語

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

參考文獻：

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

[2] 陶琳.基于Spring Boot和Vue框架的高校實驗室耗材管理系統(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)編輯：梁書】