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

目录
  • 1、Aplayer和Metingjs 的文档
  • 2、使用方式
  • 3、完整API
  • 4、总结

1、Aplayer和Metingjs 的文档

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

赞 (0)

相关推荐

  • 使用vue-aplayer插件时出现的问题的解决

    本文介绍了使用vue-aplayer插件时出现的问题的解决,分享给大家,具体如下: 安装 $ npm install vue-aplayer --save 使用 <aplayer autoplay :music="{ title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', url: 'http://devtest.qiniudn.com/Preparation.mp3', pic: 'http://devtest.qiniud

  • vue音乐播放器插件vue-aplayer的配置及其使用实例详解

    昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观. 首先,我们先安装 npm install vue-aplayer --save ,之后在组件中引入  import VueAplayer from 'vue-aplayer',下面就是源码,可供参考: <template> <div> <div style="padding:10px 0;"> <a-p

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

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

    目录 1.Aplayer和Metingjs 的文档 2.使用方式 3.完整API 4.总结 1.Aplayer和Metingjs 的文档 Aplayer官网文档 Metingjs官网文档 2.使用方式 在 public 目录下的 index.html 中引入核心依赖 <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" rel="e

  • 关于vue中根据用户权限动态添加路由的问题

    关于vue中根据用户权限动态添加路由的问题

    根据用户的权限,展示不同的菜单页. 知识点 路由守卫(使用了前置守卫):根据用户角色判断要添加的路由 vuex:保存动态添加的路由 难点 每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由. (若没有判断 则会一直添加 导致内存溢出) 根据角色判断路由 过滤动态路由 判断每条路由角色是否与登录传入的角色一致 <template> <div> <el-menu :default-active=&q

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • vue中移动端调取本地的复制的文本方式

    我就废话不多说了,大家还是直接看代码吧~ _this.$vux.confirm.show({ title: '复制分享链接', content: '分享的内容', onConfirm() { // _this.$vux.toast.text('复制成功') let url = '分享的内容'; let oInput = document.createElement('input'); oInput.value = url; document.body.appendChild(oInput); o

  • vue中提示$index is not defined错误的解决方式

    今天学习Vue中遇到了一个报错信息:$index is not defined,是我写了个for循环在HTML中,然后是因为版本的问题 下面是解决方法: 原来的是 v-for="person in items" v-on:click="deletePerson($index)"//这个仅仅适用于1.0版本,不要采坑了同学们 这个在Vue1.0版本中式适用的可以直接使用$index,但是在2.0是不适合的 在Vue 2.0版本中获取索引我们需要通过 v-for = &

  • Vue中如何给Window对象添加方法

    目录 给Window对象添加方法 为window对象添加事件处理程序 给Window对象添加方法 大家都知道vue中所有元素都是作用于Vue实例的,可是我使用DCloud的Wap2App打包App之后需要配置sitemap.json,配置onclick事件,但是该事件只能绑定Window下的方法,所以此时就需要在Vue中定义一个方法,并将其绑定在Windows对象下 首先在 App.vue methods 中定义一个方法 methods:{     share(){         //微信分享

  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:

  • vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    vue中手动封装iconfont组件解析(三种引用方式的封装和使用)

    目录 准备 封装 unicode引用封装 font-class引用封装 symbol引用封装 引入 全局引入 局部引入 使用 在线使用 有时候会因网络问题影响用户体验:直接放在 本地使用 ,如果过多使用也会显得繁琐,所以就可以将其封装成一个组件,也方便维护.​ 封装基于阿里巴巴图标库的项目图标. 准备 将项目内的图标下载至本地 在了路径 src/assets 下新建文件夹 iconfont ,用来存放字体图标的本地文件 解压下载到本地的字体图标文件,放到 iconfont 文件夹下 如过项目中没

  • vue中Echarts使用动态数据的两种实现方式

    vue中Echarts使用动态数据的两种实现方式

    目录 Echarts使用动态数据的两种方式 1.通过computed 2.在data中定义option vue Echarts几种常用图表动态数据切换 1.柱状图 2.平滑折线面积图 3.折线图堆叠 4.饼状图 Echarts使用动态数据的两种方式 在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式. 1.通过computed computed: {     options() {       let that

  • Vue中对数组和对象进行遍历和修改方式

    目录 对数组和对象进行遍历和修改 1.对数组进行循环 2. 修改数组的时候,不能直接通过下标去增加修改删除 3.对对象进行循环 4.增加对象的时候 修改数组和对象的特殊情况以及修改方法 修改数组的两个特殊情况 修补方法 对数组和对象进行遍历和修改 1.对数组进行循环 v-for进行循环,有两个参数(item,index) 注意:template可以成为占位符,在DOM里面不显示 2. 修改数组的时候,不能直接通过下标去增加修改删除 (1)可以用过push/pop/shift/unshift/sp

随机推荐