一個漂亮的開源HTML5音樂播放器-APlayer

紹

APlayer是一個簡約且漂亮的HTML5音樂播放器，支持多種模式，包括播放列表模式、吸底模式

、迷你模式、MSE模式、HLS模式。

Github

https://github.com/DIYgod/APlayer

安裝

使用 npm:

npm install aplayer --save

使用 Yarn:

yarn add aplayer

使用

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});

或者使用模塊化方式

import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer';

const ap = new APlayer(options);

API

APlayer.version: 靜態屬性, 返回 APlayer 的版本號
ap.play(): 播放音頻
ap.pause(): 暫停音頻
ap.seek(time: number): 跳轉到特定時間，時間的單位為秒
ap.toggle(): 切換播放和暫停
ap.on(event: string, handler: function): 綁定音頻和播放器事件，詳情
ap.volume(percentage: number, nostorage: boolean): 設置音頻音量
ap.theme(color: string, index: number): 設置播放器主題色, index 默認為當前音頻的 index
ap.setMode(mode: string): 設置播放器模式，mode 取值應為 'mini' 或 'normal'
ap.mode: 返回播放器當前模式，'mini' 或 'normal'
ap.notice(text: string, time: number, opacity: number): 顯示通知，時間的單位為毫秒，默認時間 2000 毫秒，默認透明度 0.8，設置時間為 0 可以取消通知自動隱藏
ap.skipBack(): 切換到上一首音頻
ap.skipForward(): 切換到下一首音頻
ap.destroy(): 銷毀播放器
ap.lrc-ap.lrc.show(): 顯示歌詞ap.lrc.hide(): 隱藏歌詞ap.lrc.toggle(): 顯示/隱藏歌詞
ap.list-ap.list.show(): 顯示播放列表ap.list.hide(): 隱藏播放列表ap.list.toggle(): 顯示/隱藏播放列表ap.list.add(audios: array | object): 添加一個或幾個新音頻到播放列表ap.list.add([{ name: 'name', artist: 'artist', url: 'url.mp3', cover: 'cover.jpg', lrc: 'lrc.lrc', theme: '#ebd0c2' }]); ap.list.remove(index: number): 移除播放列表中的一個音頻ap.list.remove(1); ap.list.switch(): 切換到播放列表里的其他音頻ap.list.switch(1); ap.list.clear(): 清空播放列表
ap.audio: 原生 audioap.audio.currentTime: 返回音頻當前播放時間ap.audio.duration: 返回音頻總時間ap.audio.paused: 返回音頻是否暫停支持大多數原生audio接口

事件綁定

ap.on(event, handler)

ap.on('ended', function () {
    console.log('player ended');
});

音頻事件

abort
canplay
canplaythrough
durationchange
emptied
ended
error
loadeddata
loadedmetadata
loadstart
mozaudioavailable
pause
play
playing
progress
ratechange
seeked
seeking
stalled
suspend
timeupdate
volumechange
waiting

播放器事件

listshow
listhide
listadd
listremove
listswitch
listclear
noticeshow
noticehide
destroy
lrcshow
lrchide

總結

APlayer是一個不錯的HTML5小型音樂播放器，可以將它嵌入到自己的網頁中！

天小編我博客時，看到了一位大神分享的自己的音樂播放器，小編我也COPY了一份分享給頭條上的小伙伴，能搞定這個音樂播放器找份工作還是沒壓力的，畢竟這個項目還是挺好的，正在學習web前端網頁制作的伙伴們福利來了，小編我我項目整理了一下，順便寫下這篇文章（項目地址文末有）

做完的項目如圖所示：

實現的功能

1、首頁

2、底部播放控件

3、播放頁面

4、播放列表

5、排行榜

6、音樂搜索

輸入搜索關鍵詞，點擊放大鏡圖標

7、側邊欄

API

感謝作者把api整理的這么好(點個贊)

https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=%e6%90%9c%e7%b4%a2%e9%9f%b3%e4%b9%90

目錄結構

1、輪播圖

首先感謝作者ShanaMaid/vue-image-scroll開源的代碼，我把代碼copy下來自己進行了一點修改(沒有手指滑動效果)，因為這是移動端，少不了的手指滑動切換，所以添加了vue-touch(偷偷告訴你，vue-touch的next分支還是支持vue2.0的)。

2、歌曲操作(喜歡，分享，加入播放列表)動畫、播放列表展開與刪除歌曲動畫

transition-group

一組過度動畫，這里有個小坑的，之前看官網列表過渡的栗子，給每一項設置唯一的key值，一般都會用index。所以在做的時候就把index傳給key，結果過渡老是不對，后來換成對應的item

就正常了(生無可戀臉)。

3、直線進度條、弧形進度條

西班牙建筑大師曾說過：“直線屬于人類，曲線則歸于上帝”。在這里我大膽的使用了弧形來作為進度條，(幾大熱門音樂APP貌似還沒有弧形進度條)。

這里我用到了Vue的綁定內聯樣式

5、圖片懶加載

使用了vue-lazyload插件

用法：

6、歌詞滾動與高亮

因為api提供的歌詞包括時間，如：

[03:57.280]原諒我這一生不羈放縱愛自由

所以首先要進行字符串切割：

然后在播放的監聽事件中與播放的當前做對比：

到這就ok了

7、vuex狀態管理

推薦官方調試工具 devtools extension

想進一步理解vuex，可以看這篇博客vuex學習實踐筆記

之前看到好多人寫的vuex，把整個項目的數據放到了一個state里，導致應用的所有狀態集中到一個很大的對象。但是，當應用變得很大時，store 對象會變得臃腫不堪。

所以我建議(個人見解，輕噴)：將 store 分割到模塊（module）。每個模塊擁有自己的 state、mutation、action、getters。這樣方便管理與后期的維護。

車已到站??。

入門只是學習的開始，這時你可以運用你的技能，實現各種需求。在實現各種需求時，你會遇到更多各種各樣的問題。有些問題可能已經不是單純寫JS代碼能很好解決的了。你可能需要配合一些框架，或一些工具，或一些設計模式，或一些業務知識。

隨著解決更多問題，你也會積累更多的知識。之后會是漫長的積累過程，通過項目經驗、看書、看博客、思考、討論等等，積累你的經驗和知識。

你需要持之以恒和刨根問底。總之，之后就看你自己的了。還是和前提差不多的那句話：你需要主動。

最后再來提點建議：

寫JS的最好辦法..是不停的重復練習....其實很多人反映...學JS的時候很難..但是有些人認為..它沒有服務端的語言難.或者說..根本就不屑的學這種語言...什么破語言..老出各種各樣的錯誤...瀏覽器還不兼容..但是...學好JS對你未來的web開發有至關重要的作用....我覺得.JS是奠定RIA的基礎...或者說..客戶端的開發RIA的基礎.
這個音樂播放器項目到這里就算是做完了，想要完整代碼自己學習練手的小伙伴進我的群自助領取，已經上傳到群文件里了：640633433，歡迎初學和進階中的小伙伴。

如果項目有哪些缺陷，歡迎在評論區指正！

天給大家做一個音樂播放器，源碼都在下面，大家多多提意見哈

這里還是要說一下我的前端學習群：594959296，從我一個人到現在的1297人都是我每篇文章每個特效聚集的小伙伴，可以說都是我們大前端的學霸啊，不定期分享干貨。想學到東西的都可以來，歡迎初學和進階中的小伙伴。

效果圖：

實現的功能

1、首頁

2、底部播放控件

3、播放頁面

4、播放列表

5、排行榜

6、音樂搜索

輸入搜索關鍵詞，點擊放大鏡圖標

7、側邊欄

目錄結構

開發心得與總結

1、輪播圖

地址：https://github.com/hzzly/MagicMusic/blob/master/src/components/banner.vue

2、歌曲操作(喜歡，分享，加入播放列表)動畫、播放列表展開與刪除歌曲動畫Vue提供了transition的封裝組件，在下列情形中，可以給任何元素和組件添加 entering/leaving 過渡

條件渲染（使用 v-if）
條件展示（使用 v-show）
動態組件
組件根節點

transition-group一組過度動畫，這里有個小坑的，之前看官網列表過渡的栗子，給每一項設置唯一的key值，一般都會用index。所以在做的時候就把index傳給key，結果過渡老是不對，后來換成對應的item就正常了(生無可戀臉)。

3、直線進度條、弧形進度條

西班牙建筑大師曾說過：“直線屬于人類，曲線則歸于上帝”。在這里我大膽的使用了弧形來作為進度條，(幾大熱門音樂APP貌似還沒有弧形進度條)。

這里我用到了Vue的綁定內聯樣式

4、本地存儲

將一些數據緩存到localStorage，可以減少Http請求，從而優化頁面加載時間。

在這個項目中首頁歌曲列表以及搜索歷史用到了本地緩存，拿搜索歷史來舉栗：

5、圖片懶加載

使用了vue-lazyload插件

用法：

6、歌詞滾動與高亮

因為api提供的歌詞包括時間，如：

[03:57.280]原諒我這一生不羈放縱愛自由

所以首先要進行字符串切割：

然后在播放的監聽事件中與播放的當前做對比：

到這就ok了

7、VUEX狀態管理

推薦官方調試工具 devtools extension

所以我建議(個人見解，輕噴)：將 store 分割到模塊（module）。每個模塊擁有自己的 state、mutation、action、getters。這樣方便管理與后期的維護。

車已到站??。

不知不覺寫了這么多，老鐵們湊合這看吧，覺得還行的可以點贊，需要完整代碼練習的加群：594959296 已經上傳到群文件。

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻

在線咨詢

上一篇：19.HTML CSS邊距、邊框、填充和內容
下一篇：傳播銀行類木馬的Office 0day漏洞技術分析

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一個漂亮的開源HTML5音樂播放器-APlayer

紹

Github

安裝

使用

API

事件綁定

總結

這里還是要說一下我的前端學習群：594959296，從我一個人到現在的1297人都是我每篇文章每個特效聚集的小伙伴，可以說都是我們大前端的學霸啊，不定期分享干貨。想學到東西的都可以來，歡迎初學和進階中的小伙伴。

實現的功能

目錄結構

開發心得與總結

如果想看到更加系統的文章和學習方法經驗可以關注我的微信公眾號：‘web前端課程’關注后回復‘給我資料’可以領取一套完整的學習視頻

您的項目需求