Vue - 音频播放器插件(vue-aplayer)
使用音频播放器插件(vue-aplayer)
·
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
更多推荐
所有评论(0)