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


Posted in Javascript onJuly 10, 2017

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

首先,我们先安装 npm install vue-aplayer --save ,之后在组件中引入  import VueAplayer from 'vue-aplayer',下面就是源码,可供参考:

<template> 
 <div> 
  <div style="padding:10px 0;"> 
   <a-player :music="songList" :showlrc="3" :narrow="false" theme="#b7daff" mode="circulation" v-if="flag" listmaxheight='96px' ref="player"></a-player> 
  </div> 
   
 </div> 
</template> 
 
<script> 
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 scoped> 
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
jQuery实现拖动剪裁图片作为头像
Dec 28 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
详解vue的diff算法原理
May 20 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 #Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 #Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
Angular2生命周期钩子函数的详细介绍
Jul 10 #Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 #Javascript
在vue中获取dom元素内容的方法
Jul 10 #Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
You might like
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python实现操作文件(文件夹)
2019/10/31 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
零基础学python应该从哪里入手
2020/08/11 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
校园安全检查制度
2014/02/03 职场文书
建筑安全责任书范本
2014/07/24 职场文书
感谢信的格式
2015/01/21 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL