您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue3+ts如何使用APlayer”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“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 { // 音頻藝術(shù)家 artist: String; // 音頻名稱(chēng) 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({ // 開(kāi)啟吸底模式 fixed: { type: Boolean as PropType<boolean>, default: true }, // 開(kāi)啟迷你模式 mini: { type: Boolean as PropType<boolean>, default: true }, // 音頻自動(dòng)播放 autoplay: { type: Boolean as PropType<boolean>, default: false }, // 主題色 theme: { type: String as PropType<string>, default: 'rgba(255,255,255,0.2)' }, // 音頻循環(huán)播放 loop: { type: String as PropType<'all' | 'one' | 'none'>, default: 'all' }, // 音頻循環(huán)順序 order: { type: String as PropType<'list' | 'random'>, default: 'random' }, // 預(yù)加載 preload: { type: String as PropType<'auto' | 'metadata' | 'none'>, default: 'auto' }, // 默認(rèn)音量 volume: { type: Number as PropType<number>, default: 0.7, validator: (value: Number) => { return value >= 0 && value <= 1; } }, // 歌曲服務(wù)器(netease-網(wǎng)易云, tencent-qq音樂(lè), kugou-酷狗, xiami-小米音樂(lè), baidu-百度音樂(lè)) songServer: { type: String as PropType<'netease' | 'tencent' | 'kugou' | 'xiami' | 'baidu'>, default: 'netease' }, // 播放類(lèi)型(song-歌曲, playlist-播放列表, album-專(zhuān)輯, search-搜索, artist-藝術(shù)家) songType: { type: String as PropType<string>, default: 'playlist' }, // 歌的id songId: { type: String as PropType<string>, default: '19723756' }, // 互斥,阻止多個(gè)播放器同時(shí)播放,當(dāng)前播放器播放時(shí)暫停其他播放器 mutex: { type: Boolean as PropType<boolean>, default: true }, // 傳遞歌詞方式 lrcType: { type: Number as PropType<number>, default: 3 }, // 列表是否默認(rèn)折疊 listFolded: { type: Boolean as PropType<boolean>, default: true }, // 列表最大高度 listMaxHeight: { type: String as PropType<string>, default: '100px' }, // 存儲(chǔ)播放器設(shè)置的 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 }) }) }) }) // 銷(xiāo)毀 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”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)vue3+ts如何使用APlayer這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。