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 添加音乐插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3和Vue2的响应式原理
这篇文章我们将探讨Vue3框架的优秀特性、使用原理、周边生态和实战应用，系统的学习Vue生态体系，希望和大家共同成长，我们一起探讨下Vue3和Vue2的响应式原理，那究竟什么是“响应式”，接下来跟着小编一起来学习吧
2023-05-05
详解vue中属性执行顺序
这篇文章主要介绍了vue中属性执行顺序,选项的执行顺序是 props -> data -> computed -> watch -> created -> mounted -> methods，具体详细内容本文给大家讲解的非常详细，需要的朋友可以参考下
2023-09-09
在pycharm中开发vue的方法步骤
这篇文章主要介绍了在pycharm中开发vue的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
vue等待数据渲染完成后执行下一个方法问题
这篇文章主要介绍了vue等待数据渲染完成后执行下一个方法问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
详解vue-cli与webpack结合如何处理静态资源
本篇文章主要介绍了详解vue-cli与webpack结合如何处理静态资源，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue3源码分析reactivity实现方法示例
这篇文章主要为大家介绍了Vue3源码分析reactivity实现方法原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
vue组件三大核心概念图文详解
本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节，感兴趣的朋友跟随小编一起看看吧
2019-05-05
vue中如何进行异步请求
前端的数据均是通过接口请求拿到的，而Vue本身不支持ajax请求，那么该怎么解决Vue中的异步请求呢？这儿提供了几种方法，希望对大家有所帮助
2022-05-05
关于vue中计算属性computed的详细讲解
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
2022-07-07
基于Vue过渡状态实例讲解
下面小编就为大家带来一篇基于Vue过渡状态实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09