前言：

vue-aplayer的api介绍

来源：入口

更多：英文源码

一、安装

使用 npm

npm install @moefe/vue-aplayer --save

使用 yarn 推荐

yarn add @moefe/vue-aplayer

二、快速开始

传统方式

<html><body><!-- prettier-ignore --><div id="app"><a-player :audio="audio" :lrc-type="3"></a-player></div></body><!-- 你必须在引入 vue-aplayer 之前引入 vue --><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://cdn.jsdelivr.net/npm/@moefe/vue-aplayer"></script><script>Vue.use(VueAPlayer, {defaultCover: 'https://github.com/u3u.png',productionTip: true,});new Vue({el: '#app',data: {audio: {name: '东西（Cover：林俊呈）',artist: '纳豆',url: 'https://cdn.moefe.org/music/mp3/thing.mp3',cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignorelrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',},},});</script>
</html>

vue中使用：点我进入详细步骤

三、具体配置参数

fixed 可选

类型：boolean?
默认值：false
描述：是否开启吸底模式

mini 可选

提示

如果开启吸底模式，该选项可以控制播放器展开或收起

类型：boolean?
默认值：false
描述：是否开启迷你模式

autoplay 可选

注意

由于大多数移动端浏览器禁止了音频自动播放，所以该选项在移动端无效

类型：boolean?
默认值：false
描述：是否开启自动播放

theme 可选

提示

你可以选择引入 color-thief 让播放器根据封面图片自动获取主题颜色

类型：string?
默认值：#b7daff
描述：设置播放器默认主题颜色

loop 可选

注意

由于播放器会保存用户的使用习惯，所以播放器首次初始化之后该选项将失效

类型：APlayer.LoopMode?
默认值：all
描述：设置播放器的初始循环模式

declare namespace APlayer {export type LoopMode = 'all' | 'one' | 'none';
}

order 可选

注意

由于播放器会保存用户的使用习惯，所以播放器首次初始化之后该选项将失效

类型：APlayer.OrderMode?
默认值：list
描述：设置播放器的初始顺序模式

declare namespace APlayer {export type OrderMode = 'list' | 'random';
}

preload 可选

类型：APlayer.Preload?
默认值：auto
描述：设置音频的预加载模式

declare namespace APlayer {export type Preload = 'none' | 'metadata' | 'auto';
}

volume 可选

类型：number?
默认值：0.7
描述：设置播放器的音量

audio 必填

类型：APlayer.Audio | Array<APlayer.Audio>
默认值：undefined
描述：设置要播放的音频对象或播放列表

declare namespace APlayer {export type AudioType = 'auto' | 'hls' | 'normal';export interface Audio {id?: number; // 音频 idname: string | VNode; // 音频名称artist: string | VNode; // 音频艺术家url: string; // 音频播放地址cover: string; // 音频封面lrc?: string; // lrc 歌词theme?: string; // 单曲主题色，它将覆盖全局的默认主题色type?: AudioType; // 指定音频的类型speed?: number; // 单曲播放速度}
}

点击加载播放器

这里与 APlayer 不同的是新增了 id 和 speed 属性。
id 默认情况下由播放器自动生成，你也可以手动传一个 id 来覆盖它。
speed 属性可以指定该音频的播放速度。

注意

id 是用来区分音频的唯一标识，不允许重复，如果出现重复可能会导致播放器出现异常。
默认情况下 id 是根据播放列表的索引生成，当播放列表发生变化时 (新增/删除) 会重新生成。
当你从播放列表中删除音频时，由于播放列表发生了变化，所以会导致当前音频的 id 与删除后的播放列表不匹配。出现这种情况时，会降级根据 url 更新当前音频的信息，如果播放列表中每一项的 url 都是唯一的，那么不会有问题。如果有重复的 url，你必须设置音频的 id 属性，以确保每一项都是唯一的，否则播放器可能出现异常。

#customAudioType 可选

类型：{ [index: string]: Function }?
默认值：undefined
描述：自定义音频类型

vue-aplayer的api详细讲解相关推荐

Vue模仿todo超详细讲解（附源码）
Vue模仿todo超详细讲解(附源码) 一.todo基本DOM结构二.todo功能需求分析 1.新增任务 2.点击变成完成状态 3.点击删除 4.双击进入编辑以及修改保存 5.底部的状态筛选 6.l ...
vue中computed的详细讲解
vue中computed的详细讲解 1.定义 2.用法 3.computed的响应式依赖(缓存) 4.应用场景 1.定义 computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相 ...
vue脚手架基础API全面讲解【内附多个案例】
vscode-插件补充 vue文件代码高亮插件-vscode中安装代码提示插件-vscode中安装知识点自测想学会今天的内容, 先测测这几个会不会表达式, 变量是什么 new的作用和含义实例 ...
Vue响应式原理详细讲解
面试官:请你简单的说说什么是Vue的响应式. 小明:mvvm就是视图模型模型视图,只有数据改变视图就会同时更新. 面试官:说的很好,回去等通知吧. 小明:.... Vue响应式原理先看官方的说法简 ...
30 道 Vue 面试题，内含详细讲解！
1.说说你对 SPA 单页面的理解,它的优缺点分别是什么? SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML.JavaScript 和 CSS ...
Vue 注意事项，内含详细讲解
前言转自[https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649091937&idx=1&sn=1d08ebe7 ...
尚硅谷vue笔记详细讲解版（尚硅谷天禹老师）
视频:[尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通]https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=10e3dfac9 ...
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
-----------------------------------------原文链接------------------------------- 30 道 Vue 面试题,内含详细讲解(涵盖入 ...
《Unity API常用方法和类详细讲解—Siki学院》课程学习笔记02
<Unity API常用方法和类详细讲解-Siki学院>课程学习笔记02 课时10 GameObject.Component和Object的千丝万缕的关系一个游戏由多个场景组成,一个场景 ...

vue-aplayer的api详细讲解

前言：

vue-aplayer的api介绍

来源：入口

更多：英文源码

目录：

一、安装

使用 npm

使用 yarn 推荐

二、快速开始

传统方式

vue中使用：点我进入详细步骤

三、具体配置参数

fixed 可选

mini 可选

autoplay 可选

theme 可选

loop 可选

order 可选

preload 可选

volume 可选

audio 必填

#customAudioType 可选

vue-aplayer的api详细讲解相关推荐

最新文章

热门文章

vue-aplayer的api详细讲解

前言：

vue-aplayer的api介绍

来源：入口

更多 ： 英文源码

目录：

一、安装

使用 npm

使用 yarn 推荐

二、快速开始

传统方式

vue中使用：点我进入详细步骤

三、具体配置参数

fixed 可选

mini 可选

autoplay 可选

theme 可选

loop 可选

order 可选

preload 可选

volume 可选

audio 必填

#customAudioType 可选

vue-aplayer的api详细讲解相关推荐

最新文章

热门文章

更多：英文源码