vue中使用aplayer插件做一个网页音乐播放器

我们在浏览网页的时候，时常会看到一些网页音乐播放器，本文以vue为例，使用aplayer插件，做一个简单的网页播放器。我们先看一下效果图

效果图

正常模式

吸底模式

当然还有迷你模式，就是能隐藏的都隐藏，这里不赘述，做相应配置就会出现对应效果。

注意，吸底模式会出现上一曲下一曲按钮，以及歌词按钮。正常模式是没这个的。不过我个人更加喜欢正常模式。

使用步骤

第一步，npm下载aplayer插件：cnpm install aplayer --save

第二步，搭配下载hls.js：cnpm i hls.js --save

第三步，在需要使用的页面引入插件，也要引入插件的样式**

代码如下

直接复制粘贴即可看到效果：

本例中只举例了常用的配置项，完整配置项，还是要看官网文档哦

aplayer官方文档地址

https://aplayer.js.org/#/zh-H...

补充vue-aplayer

另外再补充一个也还可以的，功能和这个aplayer插件类似的音频播放插件，不过个人觉得aplayer插件更加好用。

vue-aplayer官方文档地址

https://github.com/SevenOutma...