基于Web的音樂播放器前端的設計與實現

林陳佑康 王風碩

摘要：隨著互聯網的不斷發展進步，網絡逐漸成為人們日常生活的必需品，加上生活節奏的不斷加快、生活壓力的增大，聽音樂也成為人們娛樂、放松的主要方式之一。該文闡述了基于Web開發的一個在線的音樂播放器網站前端的設計與開發，主要使用了Vue.js框架，應用Element-UI組件，完成了整個在線音樂播放器網頁的前端頁面搭建，是一個可以實現用戶自定義注冊、登錄賬號，可以自由聽、搜索和收藏音樂，評論歌曲的在線音樂播放器網站。

關鍵詞：前端開發;Vue.js;Element-UI;音樂播放器

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

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

開放科學（資源服務）標識碼（OSID）：

1引言

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

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

2 技術選型

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

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

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

3 需求分析

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

4 功能模塊分析

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

5模塊功能設計

5.1用戶安全管理模塊

5.1.1 注冊

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

5.1.2 登錄

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

5.1.3 注銷

用戶點擊退出按鈕，即從登錄狀態變為非登錄狀態，頁面將直接刷新并返回到登錄頁面。

5.1.4 個人主頁

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

5.2 歌曲管理模塊

5.2.1 展示

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

5.2.2 檢索

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

5.2.3 播放

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

5.2.4 歌曲推薦

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

5.2.5 切歌

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

//歌曲上下首封裝

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 發布評論

用戶在歌曲詳情頁中的評論區，輸入評論的內容，點擊發布按鈕時，后臺獲取評論信息并向服務端發送請求。若服務器請求成功，評論的信息會獲取當前發布的時間并發布到評論區內，同時傳遞到后端數據庫保存到評論表單中;若請求失敗，則提示發布失敗。

5.3.2 刪除評論

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

5.3.3 回復

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

5.4 收藏管理模塊

5.4.1 添加收藏

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

5.4.2 刪除收藏

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

5.5 數據庫模塊

導入用戶表單、收藏歌曲表單、歷史聽歌歌單表單、評論表單到數據庫中。數據庫ER圖如圖2所示。

6 結束語

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

參考文獻：

[1] 劉偉.淺談改革開放以來數字音樂的產業化發展[J].產業科技創新，2020，2（5）：5-8.

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

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

【通聯編輯：梁書】