vue2.x使用音乐插件vue-aplayer

标签：Function 插件 vue APlayer refs aplayer void 音频

地址：https://aplayer.netlify.app/docs/

1、使用npm安装

npm install @moefe/vue-aplayer --save

2、main.js配置

import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer, {
  defaultCover: 'https://github.com/u3u.png',
  productionTip: true,
});

3、组件测试使用

<template>
    <aplayer :audio="audio" :lrcType="3" />
</template>

<script>
export default {
  data() {
    return {
      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-ignore
        lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
      },
    };
  },
};
</script>

4、aplayer属性

属性名称	属性类型	默认值	所有值	是否必须	描述说明
fixed	boolean	false		可选	是否开启吸底模式
mimi	boolean	false		可选	是否开启迷你模式
autoplay	boolean	false		可选	是否开启自动播放
theme	String	#b7daff		可选	设置播放器默认主题颜色
loop	APlayer.LoopMode	all	all,one，none	可选	设置播放器的初始循环模式
order	APlayer.OrderMode	list	list，random	可选	设置播放器的初始顺序模式
preload	APlayer.Preload	auto	none,metadata,auto	可选	设置音频的预加载模式
volume	number	0.7		可选	设置播放器的音量
audio	APlayer.Audio \| Array<APlayer.Audio>	undefined(无)		必选	设置要播放的音频对象或播放列表
customAudioType	{ [index: string]: Function }	undefined		可选	自定义音频类型
mutex	boolean	true		可选	是否开启互斥模式
lrcType	APlayer.LrcType	0		可选	设置 lrc 歌词解析模式
listFolded	boolean	false		可选	是否折叠播放列表
listMaxHeight	number	250		可选	设置播放列表最大高度，单位为像素
storageName	String	aplayer-setting		可选	设置存储播放器设置的 `localStorage` key

5、API接口

接口名	类型	参数	返回值	描述说明	用法
version	String			只读属性，返回 APlayer 的版本号	`import { APlayer } from '@moefe/vue-aplayer'; console.log(APlayer.version);`
media	APlayer.Media			只读的原生 `Media` 对象	`const { media } = this.$refs.aplayer; console.log(media.currentTime); // 获取音频当前播放时间 console.log(media.duration); // 获取音频总时间 console.log(media.paused); // 获取音频是否暂停`
currentMusic	APlayer.Audio			获取当前正在播放的音频	`console.log(this.$refs.aplayer.currentMusic);`
play()	Function		Promise<void>	播放音频	`this.$refs.aplayer.play();`
pause()	Function		void	暂停音频	`this.$refs.aplayer.pause();`
toggle()	Function		void	切换播放和暂停	`this.$refs.aplayer.toggle();`
seek()	Function	time: 　-类型：number 　-描述说明：时间（秒）	void	跳到特定时间	`this.$refs.aplayer.seek(100);`
switch()	Function	audio: 　-类型：number \| string 　-描述说明：音频索引或音频的部分名称	void	切换到播放列表中的其他音频	`this.$refs.aplayer.switch(1); // 切换到播放列表中的第二首歌 this.$refs.aplayer.switch('东西'); // 切换到播放列表中歌曲名包含“东西”的第一首歌`
skipBack()	Function		void	切换到上一首音频	`this.$refs.aplayer.skipBack();`
skipForward()	Function		void	切换到下一首音频	`this.$refs.aplayer.skipForward();`
showNotice()	Function	text: 　-类型：string 　-描述说明：通知文本 time：　-类型：number 　-默认值：2000 -描述说明：显示时间(毫秒) opacity: -类型：number -默认值：0.8 　-描述说明：通知透明度 (0 ~ 1)	Promise<void>	显示通知，设置时间为 0 可以取消通知自动隐藏	`this.$refs.aplayer.showNotice('喵喵喵');`
showLrc()	Function		void	显示歌词	`this.$refs.aplayer.showLrc();`
hideLrc()	Function		void	隐藏歌词	`this.$refs.aplayer.hideLrc();`
toggleLrc()	Function		void	显示/隐藏歌词	`this.$refs.aplayer.toggleLrc();`
showList()	Function		void	显示播放列表	`this.$refs.aplayer.showList();`
hideList()	Function		void	隐藏播放列表	`this.$refs.aplayer.hideList();`
toggleList()	Function		void	显示/隐藏播放列表	`this.$refs.aplayer.toggleList();`

标签：Function,插件,vue,APlayer,refs,aplayer,void,音频
From： https://www.cnblogs.com/Life-QX/p/17178150.html

vue2.x使用音乐插件vue-aplayer

相关文章

赞助商

阅读排行