这篇文章主要讲解了“vue3+ts如何使用APlayer”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue3+ts如何使用APlayer”吧!
yarn add aplayer
<!--
<!--
* @Author: MK
* @Date: 2021-12-16 15:41:47
* @LastEditTime: 2021-12-24 11:17:45
* @LastEditors: MK
* @Description: APlayer组件化
* @FilePath: \vue-mk-blog\src\components\APlayer.vue
-->
<template>
<div ref="playerRef"></div>
</template>
<script lang="ts" setup>
import http from '@/api/http'
import APlayer from 'APlayer';
import 'APlayer/dist/APlayer.min.css';
import type {PropType} from '@vue/runtime-core';
import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue'
const playerRef = ref()
let instance: APlayer;
// APlayer歌曲信息
class Audio {
// 音频艺术家
artist: String;
// 音频名称
name: String;
// 音频链接
url: String;
// 音频封面
cover: String;
// 歌词
lrc: String;
constructor(artist: String, name: String, url: String, cover: String, lrc: String) {
this.artist = artist;
this.name = name;
this.url = url;
this.cover = cover;
this.lrc = lrc;
}
}
const props = defineProps({
// 开启吸底模式
fixed: {
type: Boolean as PropType<boolean>,
default: true
},
// 开启迷你模式
mini: {
type: Boolean as PropType<boolean>,
default: true
},
// 音频自动播放
autoplay: {
type: Boolean as PropType<boolean>,
default: false
},
// 主题色
theme: {
type: String as PropType<string>,
default: 'rgba(255,255,255,0.2)'
},
// 音频循环播放
loop: {
type: String as PropType<'all' | 'one' | 'none'>,
default: 'all'
},
// 音频循环顺序
order: {
type: String as PropType<'list' | 'random'>,
default: 'random'
},
// 预加载
preload: {
type: String as PropType<'auto' | 'metadata' | 'none'>,
default: 'auto'
},
// 默认音量
volume: {
type: Number as PropType<number>,
default: 0.7,
validator: (value: Number) => {
return value >= 0 && value <= 1;
}
},
// 歌曲服务器(netease-网易云, tencent-qq音乐, kugou-酷狗, xiami-小米音乐, baidu-百度音乐)
songServer: {
type: String as PropType<'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'>,
default: 'netease'
},
// 播放类型(song-歌曲, playlist-播放列表, album-专辑, search-搜索, artist-艺术家)
songType: {
type: String as PropType<string>,
default: 'playlist'
},
// 歌的id
songId: {
type: String as PropType<string>,
default: '19723756'
},
// 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
mutex: {
type: Boolean as PropType<boolean>,
default: true
},
// 传递歌词方式
lrcType: {
type: Number as PropType<number>,
default: 3
},
// 列表是否默认折叠
listFolded: {
type: Boolean as PropType<boolean>,
default: true
},
// 列表最大高度
listMaxHeight: {
type: String as PropType<string>,
default: '100px'
},
// 存储播放器设置的 localStorage key
storageName: {
type: String as PropType<string>,
default: 'aplayer-setting'
}
})
// 初始化
onMounted(() => {
nextTick(() => {
http.player.getSongSheet(props.songServer, props.songType, props.songId)
.then(res => {
let audioList = res.data.map(value => new Audio(value.author, value.title, value.url, value.pic, value.lrc));
instance = new APlayer({
container: playerRef.value,
fixed: props.fixed,
mini: props.mini,
autoplay: props.autoplay,
theme: props.theme,
loop: props.loop,
order: props.order,
preload: props.preload,
volume: props.volume,
mutex: props.mutex,
lrcType: props.lrcType,
listFolded: props.listFolded,
listMaxHeight: props.listMaxHeight,
storageName: props.storageName,
audio: audioList
})
})
})
})
// 销毁
onBeforeUnmount(() => {
instance.destroy()
})
</script>
import axios from '@/utils/axios'
export class player {
static getSongSheet(server: string, type:String, id: String) {
return axios.get(`https://api.i-meto.com/meting/api?server=${server}&type=${type}&id=${id}&r=${Math.random()}`);
}
}
感谢各位的阅读,以上就是“vue3+ts如何使用APlayer”的内容了,经过本文的学习后,相信大家对vue3+ts如何使用APlayer这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。