准备
1.npm install vue-aplayer --save
2.import aplayer from "vue-aplayer";  
components: { aplayer },
3.<aplayer :music="audio[0]" :list="audio"  :showlrc="true"></aplayer>

效果

属性

<template>
    <aplayer :music="audio[0]" :list="audio" :showlrc="true"></aplayer>
</template>

<script>
import aplayer from 'vue-aplayer';
export default {
    components: { aplayer },
    data() {
        return {
            // 音频列表
            audio: [
                {
                    title: 'dome1', // 歌曲名字
                    artist: '豆腐厂厂长', // 演唱者
                    url: require('../../assets/vdo/bgm.mp3'), // 音频文件url
                    pic: '', // 演唱者封面
                    lrc: '[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh', // 歌词或者歌词文件
                    theme: '', // 歌曲主题
                },
                {
                    title: 'dome2',
                    artist: '杀猪队队长',
                    url: require('../../assets/vdo/bgm.mp3'),
                    pic: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E4%BB%A5%E5%AE%B6%E4%B9%8B%E5%90%8D.jpg', 
                    lrc: '[00:00.00] (,,•́ . •̀,,) 抱歉，当前歌曲暂无歌词',
                    theme: '', // 歌曲主题
                }
            ]
        };
    },
    mounted() {},

    methods: {}
};
</script>

<style scoped></style>