一个漂亮的开源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前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频

您的项目需求