0
点赞
收藏
分享

微信扫一扫

使用vue互联QQ音乐完成网站音乐播放器

分湖芝蘭 2022-12-05 阅读 60


🥐 1、新建一个Vue项目

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

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

🥖 2、APlayer 和 MetingJS 的简单介绍

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

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

在这里插入图片描述

🥚 2-2、MetingJS插件

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

在这里插入图片描述

VersionAPI StatusAPlayer
1.2.xSupported^1.10.0
2.0.xLatest^1.10.0
参数选项默认值详细描述信息
id(编号)require歌曲ID /播放列表ID /专辑ID /搜索关键字
server(平台)require音乐平台:netease,tencent,kugou,xiami,baidu
type(类型)requiresong,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文件

    <!--  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>

在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

    <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>

在这里插入图片描述

🧇 3-3、启动项目!

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

Terminal 中输入 npm run serve 命令即可启动项目
在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

🍗 4、音乐播放器歌曲播放源切换

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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


举报

相关推荐

0 条评论