Vue - 音频播放器插件（vue-aplayer）

风轻轻~

已于 2022-06-28 15:50:46 修改

阅读量1w

点赞数 5

分类专栏： # Vue__插件、依赖的使用文章标签： vue

于 2020-12-14 15:21:22 首次发布

本文链接：https://blog.csdn.net/Jie_1997/article/details/110484614

版权

Vue__插件、依赖的使用专栏收录该内容

22 篇文章 4 订阅

订阅专栏

本文档介绍了如何在Vue项目中安装和使用vue-aplayer插件来创建一个音频播放器。首先通过npm安装vue-aplayer，然后在组件中引入并注册。在模板中使用aplayer组件，并配置音乐列表、当前播放音乐、显示歌词等属性。同时，详细列出了vue-aplayer的各项参数说明和音乐信息属性，包括播放模式、主题色、歌词显示等选项，帮助开发者自定义播放器功能。

摘要由CSDN通过智能技术生成

Vue使用音频播放器插件 vue-aplayer

vue-aplayer中文文档：https://aplayer.netlify.app/docs/guide/
GitHub文档：https://github.com/SevenOutman/vue-aplayer/tree/master/docs

安装 vue-aplayer
npm install vue-aplayer --save

引入、注册

import aplayer from "vue-aplayer";  
components: { 
	aplayer 
}

使用组件

<!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
<aplayer :music="musics[0]" :list="musics"  :showlrc="true"></aplayer>

data数据

data() {
   return {
     detailForm: {
       clickType: "",
       title: "ajlgaljg",
     },
     // 音频列表
     musics: [
       {
         title: "歌曲名称",
         artist: "演唱者",
         url: "歌曲文件的URL",
         pic: "封面图片URL",
         lrc: "歌词或歌词文件的URL",
       },
       {
         title: "歌曲名称",
         artist: "演唱者",
         url: "歌曲文件的URL",
         pic: "封面图片URL",
         lrc: "歌词或歌词文件的URL",
       }
     ],
   };
 },

vue-aplayer 参数说明

名称	类型	默认值	说明
music	Object	必须	当前播放的音乐。具体请查看下方的音乐信息。
list	Array	[]	播放列表。如果 list 不是空数组，播放列表就会显示出来，即使 list 中只有一首歌曲并且它和 music 一样
mini	Boolean	false	迷你模式
float	Boolean	false	浮动模式。可以在页面上随意拖放播放器
showLrc	Boolean	false	是否显示歌词
mutex	Boolean	false	是否在该播放器播放时暂停其他播放器
theme	Boolean	‘#41b883’	主题色。如果当前歌曲也设置 theme 则以歌曲的为准
shuffle	Boolean	false	随机播放
repeat	Boolean	‘no-repeat’	轮播模式。值可以是’repeat-one’（单曲循环）‘repeat-all’（循环列表）或者’no-repeat’（不循环）。
listMaxHeight	Boolean	none	播放列表面板最大高度
listFolded	Boolean	false	默认收起播放列表
narrow			DEPRECATED，请使用mini
listmaxheight			DEPRECATED，请使用listMaxHeight
showlrc			DEPRECATED，请使用showLrc

如果用的是Vue@2.3.0+，可以在 music shuffle 和 repeat 上使用.sync修饰符

音乐信息属性：

名称	默认值	说明
src	必须	音频文件的URL
title	‘Untitled’	歌曲名称
artist	‘Untitled’	演唱者
pic	none	封面图片URL
lrc	none	歌词或者歌词文件的URL
theme	none	歌曲的主题色，会覆盖播放器的主题色
url		DEPRECATED,请使用src
author		DEPRECATED,请使用artist