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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月23日 15时24分57秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
php error_reporting 详解
2021-06-30
剖析PHP中的输出缓冲
2021-06-30
HTTP响应头不缓存
2021-06-30
apache的keepalive和keepalivetimeout(apache优化)
2021-06-30
内容协商 (Content Negotiation)
2021-06-30
关于URL编码
2021-06-30
HTTP中的缓存
2021-06-30
Varnish 和 Squid比较到底强多少
2021-06-30
mysql常用语句集锦
2021-06-30
PHP的Smarty
2021-06-30
ecshop模板的原理分析
2021-06-30
深入探究Smarty模版
2021-06-30
PHP高效率写法(详解原因)
2021-06-30
PHP数组实际占用内存大小的分析
2021-06-30
PHP运行模式
2021-06-30
MYSQL的MERGE存储引擎
2021-06-30
mysql 压力测试脚本
2019-04-27
PHP代码保护——Zend Guard
2019-04-27
Javassist 使用指南
2019-04-27
Unix下C程序内存泄漏检测工具Valgrind安装与使用
2019-04-27