Vue - 使用音频播放器插件 vue-aplayer
发布日期:2021-10-02 12:55:36 浏览次数:12 分类:技术文章

本文共 1472 字,大约阅读时间需要 4 分钟。

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

vue-aplayer中文文档:

GitHub文档:

1. 安装 vue-aplayer

npm install vue-aplayer --save

2. 引入、注册

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

3. 使用组件

4. data数据

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

5. 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

转载地址:https://blog.csdn.net/Jie_1997/article/details/110484614 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:ArcGIS api for JavaScript 3.xx 版本加载天地图
下一篇:Vue - 使用 identify插件 生成图片验证码

发表评论

最新留言

很好
[***.229.124.182]2024年04月23日 15时24分57秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章