Vue中使用 Aplayer 和 Metingjs 添加音乐插件的方式

更新时间：2022年08月04日 10:54:09 作者：☆*往事随風*☆

这篇文章主要介绍了Vue中使用 Aplayer 和 Metingjs 添加音乐插件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

1、Aplayer和Metingjs 的文档

2、使用方式

在 public 目录下的 index.html 中引入核心依赖

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

在需要使用的地方直接引入核心组件

这里以 app.vue 为例，放在这里可以全局生效

<template>
  <div id="app">
    <meting-js server="tencent" type="playlist" id="8574171521" fixed="true" autoplay="true" loop="all" order="list"
      preload="auto" list-folded="true" list-max-height="500px" lrc-type="1">
    </meting-js>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
    // HeadNav
  }
}
</script>
<style>
</style>

使用技巧

如果需要该音乐插件全局都能生效，可以将这个组件放置在 app.vue 下，这样不管怎样切换页面都能够播放音乐
如果需要局部生效，则将该组件放置在需要生效的组件中即可

使用效果如下：

在这里插入图片描述

部分参数说明：

server：指的是音乐播放平台，我这里选择的是 tencent (QQ音乐)
type：音乐播放的形式(单曲，歌单列表等等)，我这里选择的是 playlist ，即歌单类型
id：歌单的id
fixed：底部固定模式
theme：修改主题颜色

获取音乐外链，这里以QQ音乐为例：

找到自己喜欢的歌单选择分享，然后复制链接

备注：在 我喜欢 中的音乐也可以一键导出歌单

复制的音乐链接如下：

https://c.y.qq.com/base/fcgi-bin/u?__=sgoH6AlUf9VF

可以看到，这个链接好像没有我们想要的歌单id，不要着急，只需要将复制的链接用浏览器打开就能够的得到我们想要的播放类型和歌单id了

通过浏览器打开链接，我们在浏览器地址栏得到以下地址：

https://y.qq.com/n/ryqq/playlist/8574171521

这次我们就能够得到想要的播放类型和歌单id了，我们可以看到播放类型为 playlist,歌单id为 8574171521

将得到的参数赋值给我们之前引入的 <meting-js></meting-js> 组件

至此我们就完成了一个基本的音乐播放插件的使用了

3、完整API

option	default	description
id (编号)	require	song id / playlist id / album id / search keyword
server (平台)	require	music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type (类型)	require	`song`, `playlist`, `album`, `search`, `artist`
auto (支持种类)	options	music link, support: `netease`, `tencent`, `xiami`
fixed (固定底部模式)	`false`	enable fixed mode
mini (模式)	`false`	enable mini mode
autoplay (自动播放)	`false`	audio autoplay
theme (主题颜色)	`#2980b9`	main color
loop (循环播放)	`all`	player loop play, values: ‘all’, ‘one’, ‘none’
order (顺序)	`list`	player play order, values: ‘list’, ‘random’
preload (加载)	`auto`	values: ‘none’, ‘metadata’, ‘auto’
volume (声量)	`0.7`	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutex (限制)	`true`	prevent to play multiple player at the same time, pause other players when this player start play
lrc-type (歌词)	`0`	lyric type
list-folded (列表折叠)	`false`	indicate whether list should folded at first
list-max-height (最大高度)	`340px`	list max height
storage-name (存储名称)	`metingjs`	localStorage key that store player setting

选项	默认	描述
id	要求	歌曲ID/播放列表ID/专辑ID/搜索关键字
server	要求	音乐平台：`netease`, `tencent`, `kugou`, `xiami`,`baidu`
type	要求	`song`, `playlist`, `album`, `search`, `artist`
auto	选项	音乐链接，支持：`netease`,tencent``xiami
fixed	`false`	启用固定模式
mini	`false`	开启迷你模式
autoplay	`false`	音频自动播放
theme	`#2980b9`	主色
loop	`all`	播放器循环播放，值：‘all’、‘one’、‘none’
order	`list`	播放器播放顺序，值：‘list’，‘random’
preload	`auto`	值：“无”、“元数据”、“自动”
volume	`0.7`	默认音量，注意播放器会记住用户设置，用户自己设置音量后默认音量将失效
mutex	`true`	防止同时播放多个播放器，当该播放器开始播放时暂停其他播放器
lrc-type	`0`	抒情类型
list-folded	`false`	指示列表是否应首先折叠
list-max-height	`340px`	音乐列表最大高度
storage-name	`metingjs`	存储播放器设置的 localStorage 键

4、总结

首先在 index.html 引入核心依赖
然后在 app.vue 中引入核心组件(此处位置依据个人需求引入)
选择自己喜欢的音乐平台复制歌单链接获得歌单id
将得到的歌单id或歌曲id还有播放类型赋值给核心组件
如果想要实现高度定制化，则可以通过 Vue 中的 v-bind 指令来动态修改组件中参数的值，这里只是介绍一下基本实现思路和效果

到此这篇关于Vue中使用 Aplayer 和 Metingjs 添加音乐插件的文章就介绍到这了,更多相关Vue使用 Aplayer 和 Metingjs 添加音乐插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中如何实现后台管理系统的权限控制的方法步骤
这篇文章主要介绍了vue中如何实现后台管理系统的权限控制的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue菜单栏自适应折叠功能示例
这篇文章主要介绍了vue菜单栏自适应折叠,我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-01-01
vue项目中使用高德地图的超详细步骤
在vue项目中添加高德地图,对开发地图的开发人员有一定帮助,下面这篇文章主要给大家介绍了关于vue项目中使用高德地图的超详细步骤,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
Vue学习之组件用法实例详解
这篇文章主要介绍了Vue学习之组件用法,结合实例形式分析了vue.js组件的使用流程、模板、父子组件、插槽slot等相关原理与操作技巧,需要的朋友可以参考下
2020-01-01
vue如何动态获取当前时间
这篇文章主要介绍了vue如何动态获取当前时间问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
vue中wangEditor的使用及回显数据获取焦点的方法
最近在写vue的项目中，遇到一个需求，点击编辑，显示弹框，在弹框中的富文本编辑器中编辑自定义文本样式，可以上传图片并回显。接下来通过本文给大家介绍vue中wangEditor的使用及回显数据获取焦点的问题，一起看看吧
2021-09-09
React和Vue实现路由懒加载的示例代码
路由懒加载是一项关键技术,它可以帮助我们提高Web应用的加载速度,本文主要介绍了React和Vue实现路由懒加载的示例代码,具有一定的参考价值,感兴趣的可以了解一下
2024-01-01
vue中的cookies缓存存值方式超简单
这篇文章主要介绍了vue中的cookies缓存存值方式，超简单！具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue computed实现原理深入讲解
computed又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去
2022-10-10
Vue 理解之白话 getter/setter详解
这篇文章主要介绍了Vue getter setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04