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.在代码中进行使用

上面一点要注意: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 方式获取定义的标签对象

你可能感兴趣的:(vue.js)