vue音乐播放器插件vue-aplayer的配置及其使用实例详解_vue-aplayer

83 浏览量更新于2023-03-16 评论 2 收藏 43KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue音乐播放器插件音乐播放器插件vue-aplayer的配置及其使用实例详解的配置及其使用实例详解

本篇文章主要介绍了vue音乐播放器插件vue-aplayer的配置及其使用实例详解，具有一定的参考价值，有兴趣的

可以了解一下

昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件，由于个人有比较喜欢音乐，所以就拿过来玩一玩，感觉还是比较

实用的，界面美观。

首先，我们先安装 npm install vue-aplayer --save ，之后在组件中引入 import VueAplayer from 'vue-aplayer'，下面就是源

码，可供参考：

<div>

<a-player :music="songList" :showlrc="3" :narrow="false" theme="#b7daff" mode="circulation" v-if="flag" listmaxheight='96px' ref="player"></a-player>

</div>

</template>

import axios from 'axios'

import VueAplayer from 'vue-aplayer'

export default {

components: {

//别忘了引入组件

'a-player': VueAplayer

data () {

return {

flag:false,

musicList:'',

songList:[]

}

async mounted () {

//异步加载，先加载出player再使用

await this.init();

let aplayer = this.$refs.player.control;

aplayer.play();

methods:{

async init () {

//这边是引入了axios然后使用的get请求的一个音乐列表接口

const getMusicList = url => axios.get(url);

//这边url随大家更改了

let url = '';

let data = await getMusicList(url);

//以下就是这边对请求的一个处理，看接口了

if(data && data.data.showapi_res_code==0){

this.musicList = data.data.showapi_res_body.pagebean.songlist;

for(let i=0;i<=this.musicList.length;i++){

if(i<=9){

let obj={};

//url=>歌曲地址 title=>头部 author=>歌手 pic=>写真图片 lrc=>歌词

//其中url必须有，其他的都是非必须

obj.title = this.musicList[i].songname;

obj.author = this.musicList[i].singername;

obj.url = this.musicList[i].url;

obj.pic = this.musicList[i].albumpic_small;

obj.lrc = this.musicList[i].irl;

//把数据一个个push到songList数组中，在a-player标签中使用 :music="songList" 就OK了

this.songList.push(obj);

}

//因为是异步请求，所以一开始播放器中是没有歌曲的，所有给了个v-if不然会插件默认会先生成播放器，导致报错(这个很重要)

this.flag = true;

};

}

</script>

</style>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38574132

粉丝: 7
资源: 909

会员权益专享

vue音乐播放器插件vue-aplayer的配置及其使用实例详解

评论0

会员权益专享

最新资源

vue音乐播放器插件vue-aplayer的配置及其使用实例详解

评论0

Vue-mmPlayer：:musical_note:基于Vue的在线音乐播放器（PC）在线音乐播放器

vue-mini-player视频播放器

基于vue的音乐播放器搜索播放推荐列表

vue-video-player和vue-core-video-player

vue3使用vue-video-player

vue-video-player怎么使用

vue-video-player使用

vue 视频播放器插件

vue音频播放器插件

Vue-aplayer使用代码

vue-video-player使用教程

vue 使用 vue-video-playe 实例

vue2项目vue-video-player插件的版本

vue3.0 使用vue-video-player

vue2安装vue-video-player

vue项目；里使用vue-video-player

vue-aplayer

vue使用video-player

vue中使用vue-video-player

vue-video--player vue3

会员权益专享

最新资源