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

昨天在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> 

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

(0)

相关推荐

  • Vuejs仿网易云音乐实现听歌及搜索功能

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一

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

    昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观. 首先,我们先安装 npm install vue-aplayer --save ,之后在组件中引入  import VueAplayer from 'vue-aplayer',下面就是源码,可供参考: <template> <div> <div style="padding:10px 0;"> <a-p

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • Vue import from省略后缀/加载文件夹的方法/实例详解

    目录 简介 省略后缀 说明 官网网址 详解 文件名相同的处理流程 加载文件夹 简介 说明 详解 实例 1. 路由配置中导入layout文件夹 2.layout/index.vue引入目录 3.components/index.js引入各个组件 简介 本文介绍Vue在import时省略后缀以及import文件夹的方法. 省略后缀 说明 可以配置省略后缀,比如:test.js,只用test即可. 官网网址 解析(Resolve) | webpack 中文文档 详解 配置文件:webpack.base

  • Lombok插件安装(IDEA)及配置jar包使用详解

    点击进入Lombok官网下载Lombok jar包 使用Lombok可能需要注意的地方 (1).当你的IDE是Idea时,要注意你的Idea是支持Lombok的,如果不支持请更换高版本尝试(这里采用2018 3.3). (2).在使用Lombok时,你的编辑器可能会报错,这时请在你的IDE中安装Lombok插件(如果使用的Idea则直接搜索Lombok插件,选择星级最高的,直接安装就是,其他Ide类同). (3).参数的处理往往都是根据项目需求来进行,请妥善处理参数. (4).如果你无法访问Lo

  • vue一个页面实现音乐播放器的示例

    本文介绍了vue一个页面实现音乐播放器的示例,分享给大家,具体如下: 效果如下: 项目地址:https://github.com/ermu592275254/MiniMusicPlayer 演示地址: https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效) 开发前构思 界面 做音乐播放器,界面一定要炫酷.太low了听歌没感觉.本身是为了在上班的时候用,于是做成了一个类似网易云音乐的界面,大小合适.不用兼容手机端. 用css做图标 本怀着

  • Vue.js实现音乐播放器

    本文实例为大家分享了Vue.js实现音乐播放器的具体代码,供大家参考,具体内容如下 目录如下: 运行效果如图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" char

  • vue实现简易音乐播放器

    本文实例为大家分享了vue实现简易音乐播放器的具体代码,供大家参考,具体内容如下 先看效果 代码中使用的ivewUI前端框架 使用的是font-awesome字体图标  需要先安装 npm install font-awesome --save <template> <Card style="width:100%"> <template #title > <Icon type="ios-musical-notes">&

  • 适用于 Vue 的播放器组件Vue-Video-Player操作

    如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> 配置参数:

  • 基于vue-element组件实现音乐播放器功能

    最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下 演示地址 https://github-laziji.github.io 效果 使用到的组件 element组件 布局 Layout 按钮 Button 滑块 Slider 进度条 Progress 弹出框 Popover html5组件 audio 实现代码 更详细的实现可以看 https://github.com/GitHub-Laziji/vblog <template>

  • Vue3实现简易音乐播放器组件

    前言 用Vue3实现一个简易的音乐播放器组件 其效果图如下所示: 实现这个组件需要提前做的准备: 引入ElementUI 引入字节跳动图标库 一张唱见图片 将要播放的音乐上传到文件服务器上,并提供一个能在线访问的链接[这里使用的是阿里云的OSS服务] 准备 ElementUI ElementUI的引入可以参照其官网的引入方式: 字节跳动图标库 组件的[上一首][播放][下一首][音量]等图标都是来源自这个图标库,这是其安装文档 在main.js中,我是这样引入的: //引入字节跳动图标库 imp

随机推荐