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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
node.js require() 源码解读
Dec 13 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
AngularJS服务service用法总结
Dec 13 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
js中let能否完全替代IIFE
Jun 15 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
常用的js方法合集
2017/03/10 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
风险评估实施方案
2014/03/09 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
KVM基础命令详解
2022/04/30 Servers