vue.js 使用 vue-aplayer 音頻播放器（最全面）

效果圖：

代碼實現：

1.首先引入 vue-aplayer 包

npm install @moefe/vue-aplayer --save

 2.然後在 main.js 中進行配置

import APlayer from '@moefe/vue-aplayer'
Vue.use(APlayer);

3.在代碼中進行使用

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

上面一點要注意：ref="aplayer" 是爲了方便 vue.js 去找到這個標籤元素

this.$refs.aplayer 則代表上面所創建的標籤元素，可以對這個元素進行一些 api 的調用

4.進行配置

audio: {
                    name: '東西（Cover：林俊呈）',
                    artist: '納豆',
                    url: '/api/project/getPlayResource/24',
                    cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
                    lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
                },

5.API 調用及其他內容配置

https://aplayer.netlify.com/docs/guide/api.html

這裏強調一點哦，對上面的標籤對象進行操作，使用 this.$refs.aplayer 方式獲取定義的標籤對象