提示
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。如果你使用字符串模板，那么这个限制就不存在了。
boolean?false提示
如果开启吸底模式，该选项可以控制播放器展开或收起
boolean?false注意
由于大多数移动端浏览器禁止了音频自动播放，所以该选项在移动端无效
boolean?false提示
你可以选择引入 color-thief 让播放器根据封面图片自动获取主题颜色
string?#b7daff注意
由于播放器会保存用户的使用习惯，所以播放器首次初始化之后该选项将失效
APlayer.LoopMode?alldeclare namespace APlayer {
export type LoopMode = 'all' | 'one' | 'none';
}
注意
由于播放器会保存用户的使用习惯，所以播放器首次初始化之后该选项将失效
APlayer.OrderMode?listdeclare namespace APlayer {
export type OrderMode = 'list' | 'random';
}
APlayer.Preload?autodeclare namespace APlayer {
export type Preload = 'none' | 'metadata' | 'auto';
}
number?0.7APlayer.Audio | Array<APlayer.Audio>undefineddeclare namespace APlayer {
export type AudioType = 'auto' | 'hls' | 'normal';
export interface Audio {
id?: number; // 音频 id
name: 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 属性，以确保每一项都是唯一的，否则播放器可能出现异常。
{ [index: string]: Function }?undefined<template>
<aplayer :audio="audio" :customAudioType="customAudioType" :lrcType="3" />
</template>
<script>
import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';
Vue.use(APlayer);
export default {
data() {
return {
audio: {
name: 'Let It Go.m3u8',
artist: 'Idina Menzel',
url: 'https://cdn.moefe.org/music/hls/frozen.m3u8',
cover: 'https://p1.music.126.net/n72JJkPg2-ENxhB-DsZ2AA==/109951163115400390.jpg?param=300y300', // prettier-ignore
lrc: 'https://cdn.moefe.org/music/lrc/frozen.lrc',
type: 'customHls',
},
customAudioType: {
customHls(audioElement, audio, player) {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(audio.url);
hls.attachMedia(audioElement);
} else if (
audioElement.canPlayType('application/x-mpegURL') ||
audioElement.canPlayType('application/vnd.apple.mpegURL')
) {
audioElement.src = audio.url;
} else {
player.showNotice('Error: HLS is not supported.');
}
},
},
};
},
};
</script>
boolean?true如果开启则会阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
APlayer.LrcType?0declare namespace APlayer {
export enum LrcType {
file = 3, // 表示 audio.lrc 的值是 lrc 文件地址，将通过 `fetch` 获取 lrc 歌词文本
html = 2, // 不支持 html 用法
string = 1, // 表示 audio.lrc 的值是 lrc 格式的字符串，将直接通过它解析歌词
disabled = 0, // 禁用 lrc 歌词
}
}
注意
由于播放器会保存用户的使用习惯，所以播放器首次初始化之后该选项将失效
boolean?falsenumber?250string?aplayer-settinglocalStorage key这里与 APlayer 有所不同，在 localStorage 中保存的是对象数组
不同的实例之间互不影响，一般情况下你不需要修改此项。
declare namespace APlayer {
export type LoopMode = 'all' | 'one' | 'none';
export type OrderMode = 'list' | 'random';
export interface Settings {
currentTime: number; // 当前音频的播放时间
duration: number | null; // 当前音频的长度
paused: boolean; // 当前播放器是否暂停
mini: boolean; // 是否是 mini 模式
lrc: boolean; // 当前歌词
list: boolean; // 当前列表是否展开
volume: number; // 当前播放器音量
loop: LoopMode; // 当前循环模式
order: OrderMode; // 当前顺序模式
music: Audio | null; // 当前播放的音频对象
}
}
// 你可以使用实例的 `currentSettings` 属性获取当前实例的播放器设置
console.log(this.$refs.aplayer.currentSettings);