玩转音乐世界:Vue技能进阶,QQ音乐网站播放器嗨翻天

高级前端进阶

共 4581字,需浏览 10分钟

 · 2023-06-26

🎶 文章简介:使用vue互联QQ音乐完成网站音乐播放器

💡 创作目的:记录使用APlayer播放器+MetingJs实现 在线播放qq音乐、网易云音...等平台的音乐

☀️ 今日天气:小雨多云 天空灰蒙蒙的 🥲

📝 每日一言:要一个黄昏,满是风,和正在下落的夕阳!


不需要观看基础部分内容同学可直接去跳转至第二部分。

🥐 1、新建一个Vue项目

本文默认大家已经安装nodejs

🧀 1-1、使用npm安装Vue脚手架

我们打开控制台 / Cmd,执行 npm install \-g @vue/cli 命令进行脚手架的全局安装。若安装过程中出现Error可尝试使用cnpm进行安装。

1954b799d1916c361fba5f95b6575a07.webp

🍞 1-2、使用vue脚手架初始化Vue项目

我们打开控制台 / Cmd,执行 vue create [项目名称] 命令进行vue项目的初始化。这里大家可以根据自身情况来进行选择使用那个版本的vue(上下键进行选项的切换,空格确认)

bae78bcbff36ccf20f5fb3af4cf4902f.webp

我这里选择自定义配置(后面浅蓝色字体为选择项,大家可进行参考)

f0961579b7154281c9619068fc2b7f40.webp

项目创建成功!

d56db13c661ef2a956ddca010ee0c5b6.webp 🥖 2、APlayer 和 MetingJS 的简单介绍

🥨 2-1、APlayer开源音乐播放器

Aplayer是一个功能强大的HTML5音乐播放器,

开源地址:https://github.com/DIYgod/APlayer 在线文档:https://aplayer.js.org/#/zh-Hans/

44b3c53bd3a0dbc0800b74df13c6c23e.webp

🥚 2-2、MetingJS插件

Metingjs基于Aplayer插件封装好的插件,开箱即用。

开源地址:https://github.com/metowolf/MetingJS

903760aa1326eb19e7aebf1a14e93c0d.webp

MetingJS所支持Aplayer版本

Version API Status APlayer
1.2.x Supported ^1.10.0
2.0.x Latest ^1.10.0

MetingJs参数详情

参数选项 默认值 详细描述信息
id(编号) require 歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台) require 音乐平台:netease,tencent,kugou,xiami,baidu
type(类型) require song,playlist,album,search,artist
auto(支持类种 类) options 音乐链接,支持:netease,tencent,xiami
fixed(固定模式) false 启用固定模式,默认false
mini(迷你模式) false 启用迷你模式,默认false
autoplay(自动播放) false 音频自动播放,默认false
theme(主题颜色) #2980b9 默认#2980b9
loop(循环) all 播放器循环播放,值:“all”,one”,“none”
order(顺序) list 播放器播放顺序,值:“list”,“random”
preload(加载) auto 值:“none”,“metadata”,“'auto”
volume(声量) 0.7 默认音量,请注意播放器会记住用户设置,用户自己设置音量后默认音量将不起作用
mutex(限制) true 防止同时播放多个玩家,在该玩家开始播放时暂停其他玩家
lrc-type(歌词) 0 歌词显示
list-folded(列表折叠) false 指示列表是否应该首先折叠
list-max-height(最大高度) 340px 列出最大高度
storage-name(储存名称) metingjs 存储播放器设置的localStorage键
🍳 3、将上述开源插件整合至Vue项目中

🧈 3-1、引入上述差距对应js文件

我们使用编辑器打开新创建的Vue项目,进入至public目录下的index.html,引入上述插件相对应的js文件。(那么大家可能会发问了,这两款插件在npm仓库中存在,为什么不使用npm进行拉取,而使用在线js?当然都是可以的,只不过使用js会更加简单一些)

      
      
        <!--  APlayer -->
        
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"> </script>
<!-- MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"> </script>

93656cfce146b2d3489c4417d9a4ca2d.webp

🥞 3-2、在App.vue内使用Meting.js

我们首先删除多余的内容,还App.vue一片清净。

e2876aedfd95a2e93c942eef6b44b6cd.webp

然后我门在div内部添加如下代码

      
      <meting-js
id="8692248848"
server="tencent"
type="playlist"
fixed="true"
autoplay="true"
loop="all"
order="random"
preload="auto"
list-folded="ture"
list-max-height="500px"
lrc-type="1">
</meting-js>
5d06de5400bd85ca21868fa5722d53b4.webp

🧇 3-3、启动项目!

你:啊这就启动项目了?这就行了?真的假的?我好像什么都没干呀?🧐 我:没错,已经完成了,启动项目运行就可以了!啊,你不会不知道项目怎么启动吧?!?

🥓 3-3-1、在控制台输入命令启动vue项目

Terminal 中输入 npm run serve 命令即可启动项目19ff7f450fe56f88041a41bec39baac5.webp

🥩 3-3-2、通过package.js启动项目

进入到Package.json文件内,点击第一个绿色的小箭头,然后选择 Run Serve 即可启动项目。

057b00abb3d54a4d685be0d6705339c6.webp

启动成功之后通过控制台生产的链接进行访问即可

4f24628bcd51e22f9195d82d74271223.webp

然后我们就发现网站的左下角已经出现了音乐播放器,且可以正常播放音乐!!那么问题来了,这些音乐是哪里来的,为什么会播放这些歌曲呢?🤯

827c95c0c4f114c9499178a59eac0587.webp 🍗 4、音乐播放器歌曲播放源切换

不知道大家是否还记得在介绍MetingJs时的参数列表,没错正是通过参数列表进行歌曲配置的。下面所圈出来的三个参数为最重要的三个匹配参数

8c20887ce8117a22f0d8ccfb8741588c.webp

🍖 4-1、QQ音乐歌单播放

  1. 更换配置中server为tencent(QQ音乐)
  2. 更换配置中type为自己需要的类型 (song=>歌曲 playlist=>歌单 ...)
  3. 更换配置中id为自己歌曲、歌单...的id

目前来看我门选择的就是QQ音乐源,我们也想去播放歌单的歌曲,那么我门可以只更换id,那么这个id是如何获取的呢?

ab0b1d93d045c075a356de9e7fd53f62.webp

🌭 4-1-1、获取QQ音乐歌单id

  1. 我们随便选择一个歌单。(当然我们也可以新建自己的歌单)
  2. 选择分享按钮
  3. 复制分享链接
  4. 我们在浏览器中进行访问
  5. 我们会发现url中最后面的参数已经是一串数字了(这个呢就是我们所需要的id了)

b1ca2c2f896ccdbe54b42b7bf9606947.webp5d0a33713101bc44bcdf49b2c9d64f6a.webp

b1924f4935a655bd9e0fa6533a835f7d.webpd83907906cc198510769d53492dd2b50.webp

fd1b792af0d584350493f5846801f99c.webp

🍔 4-1-2、替换App.vue中的id

我们去替换App.vue中的id,然后重新启动项目,刷新页面,就会发现歌曲已经变为对应歌单中的歌曲了!

c384f686d4a52b16427b87c280dcfd08.webp 1dddc5104aa3f7753205363cc5f4de33.webp

🍟 4-2、网易云音乐歌单播放

内容QQ音乐切换基本上一致,我们通过网页端打开之后也可以在url中找到id 我们只需要去修改一下id和serve 相信聪明的你一定可以可以举一反三,其他几个源则不再进行演示了。

85dd59d8be3c99810b2b8da8dbc5af46.webpd90b369bc0c4391680ff7afa68d5f996.webp624eed51cca06a81c5f68629143088e4.webp

🍕 5、既然都看到这里了,和不留下三连再离开呢🥴🥴

要一个黄昏,满是风,和正在下落的夕阳!

关于本文
作者:程序员pumpkin https://juejin.cn/post/7241975039982043195

The End


如果你觉得这篇内容对你挺有启发,我想请你帮我三个小忙: 1、点个 「在看」,让更多的人也能看到这篇内容 2、关注官网 https://muyiy.cn,让我们成为长期关系 3、关注公众号「高级前端进阶」,公众号后台回复 「加群」 ,加入我们一起学习并送你精心整理的高级前端面试题。

》》面试官都在用的题库,快来看看《


            
                  

最后不要忘了点赞呦!

浏览 34
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报