Vue使用vue-apalyer实现音乐播放

最新推荐文章于 2022-11-15 23:27:31 发布
最新推荐文章于 2022-11-15 23:27:31 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： 前端相关 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42707397/article/details/115394658
版权

vue-apalyer


效果图：
在这里插入图片描述

一、npm安装依赖

npm install vue-aplayer --save

二、引入插件

import aplayer from "vue-aplayer";
  components: {
    aplayer: aplayer
  },

三、组件使用

<template>
    <div id="aplayerDiv">
       <vue-scroll :ops="ops" class="vueScroll">
       <aplayer autoplay :music="{
          title: '剑心',
          artist: '张杰',
          src: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
          pic: 'https://p2.music.126.net/ixIs5kkukgNYMmeDsc35_g==/29686813955450.jpg'
        }" :list="musicList">
        </aplayer>
    </vue-scroll>
    </div>
</template>

标签中使用的音频数据，用一下别人的，我没上传音乐到服务器，后面有空传两首

 musicList: [{
          title: '白羊',
          artist:'徐秉龙',
          src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
          pic: 'https://p1.music.126.net/tczb_7II9KzSuLQsVt89Gw==/109951163049336667.jpg',
          },
          {
            title: '说谎',
            artist: '林宥嘉',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p2.music.126.net/mMZNB-jhYsw29K61QtopJA==/109951163187404137.jpg',
          }
 		]

四、完整页面，我自己的，仅供参考

<!-- 可视化demo1 -->
<template>
  <div class="charts">
    <div id="demo1Chart1" :style="{width: '500px', height: '300px'}"></div>
    <div id="demo1Chart2" :style="{width: '500px', height: '300px'}"></div>
    <div id="demo1Chart3" :style="{width: '500px', height: '300px'}"></div>
    <div id="demo1Chart4" :style="{width: '500px', height: '300px'}"></div>
    <div id="aplayerDiv">
       <vue-scroll :ops="ops" class="vueScroll">
       <aplayer autoplay :music="{
          title: '剑心',
          artist: '张杰',
          src: 'https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E5%A4%A9%E7%A9%BA%E4%B9%8B%E5%9F%8E.m4a',
          pic: 'https://p2.music.126.net/ixIs5kkukgNYMmeDsc35_g==/29686813955450.jpg'
        }" :list="musicList">
        </aplayer>
    </vue-scroll>
    </div>
  </div>
</template>


<script>
require("echarts-wordcloud");
require("echarts-liquidfill");
require('../../assets/data/china')  //引入china.js地图文件
import echartMapData from "../../assets/data/EchartMapData"//引入map数据
import aplayer from "vue-aplayer";
export default {
  data () {
    return {
      ops: {
          vuescroll: {},
          scrollPanel: {},
          rail: {
            keepShow:true
          },
          bar: {
            hoverStyle: true,
            onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
            background: 'green',
            //opacity: 0.5,//滚动条透明度
            "overflow-x": "hidden"
          }
        },
      musicList: [{
          title: '白羊',
          artist:'徐秉龙',
          src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
          pic: 'https://p1.music.126.net/tczb_7II9KzSuLQsVt89Gw==/109951163049336667.jpg',
          },
          {
            title: '说谎',
            artist: '林宥嘉',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p2.music.126.net/mMZNB-jhYsw29K61QtopJA==/109951163187404137.jpg',
          },
          {
            title: '成都',
            artist: '赵雷',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg'
          },
          {
            title: '陪你到底',
            artist: '许华升',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/a7QkLGexMQGT2lF3mqcUdw==/109951163693319625.jpg',
          },
          {
            title: '广东爱情故事',
            artist: '雨神',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/gjvguk9I-QwuyWFjQHM9SA==/109951163189947600.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          },
          {
            title: '烟火里的尘埃',
            artist: '华晨宇',
            src: "https://edu-guil-1010.oss-cn-beijing.aliyuncs.com/%E8%92%B2%E5%85%AC%E8%8B%B1%E7%9A%84%E7%BA%A6%E5%AE%9A.m4a",
            pic: 'https://p1.music.126.net/_49Xz_x9kTTdEgmYYk6w2w==/6672936069046297.jpg',
          }]
    };
  },
  components: {
    aplayer: aplayer
  },
  computed: {},
  mounted() {
    this.drowWorldCloud()
    window.addEventListener('resize', () => {
      this.chart.resize();
    });
  },
  created() {},
  methods: {
    drowWorldCloud(){
      let myChart1 = this.$echarts.init(document.getElementById('demo1Chart1'))
      let myChart2 = this.$echarts.init(document.getElementById('demo1Chart2'))
      let myChart3 = this.$echarts.init(document.getElementById('demo1Chart3'))
      let myChart4 = this.$echarts.init(document.getElementById('demo1Chart4'))
      myChart1.setOption({
        backgroundColor:'#fff',
            tooltip: {
              pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
            },
            series: [
              {
                type: "wordCloud",
                gridSize: 2,
                shape: "circle",
                // shape: 'pentagon',
                sizeRange: [12, 50],
                // rotationRange: [-90, 90],
                // width: 600,
                // height: 300,
                left: "center",
                top: "center",
                width: "70%",
                height: "80%",
                right: null,
                bottom: null,
                drawOutOfBound: false,
                textStyle: {
                  normal: {
                    fontFamily: "sans-serif",
                    fontWeight: "bold",
                    color: function() {
                      return (
                        "rgb(" +
                        [
                          Math.round(Math.random() * 160),
                          Math.round(Math.random() * 160),
                          Math.round(Math.random() * 160)
                        ].join(",") +
                        ")"
                      );
                    }
                  },
                  emphasis: {
                    shadowBlur: 10,
                    shadowColor: "#333"
                  }
                },
                data: [{name:"活着", value:2352}, {name:"追风筝的人", value:123}]
              }
            ]
      });
      myChart2.setOption({
        series: [{
        type: 'liquidFill',
        data: [0.6]
       }]
      });

      myChart3.setOption(echartMapData),
        window.addEventListener('resize', () => {
          // 自动渲染echarts
          myChart3.resize();
        })
      myChart4.setOption({
        title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
      },
      tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
          {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                  {value: 335, name: '直接访问'},
                  {value: 310, name: '邮件营销'},
                  {value: 234, name: '联盟广告'},
                  {value: 135, name: '视频广告'},
                  {value: 1548, name: '搜索引擎'}
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
      });
    }
  }
}
</script>
<style scoped>
  .charts{
      width: 1010px;
      height: 650px;
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }
  #demo1Chart1{
    border: solid 1px #eea7ba;
  }
  #demo1Chart2{
    border: solid 1px #eea7ba;
  }
  #demo1Chart3{
    border: solid 1px #eea7ba;

  }
  #demo1Chart4{
    border: solid 1px #eea7ba;

  }
  #aplayerDiv{
    border: solid 1px #eea7ba;
    height: 600px;
    width: 330px;
    position: relative;
    left: 1005px;
    top: -605px;
  }
  #aplayerDiv .vueScroll{
    height: 600px !important;
  }
</style>
EricFRQ
关注
专栏目录
12 使用Vue+Vue-router+el-menu实现菜单功能实战
xingyu_qie的专栏
04-10 8237
我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件
vue3使用vue-baidu-map-3x百度地图
最新发布
weixin_45767637的博客
07-24 3584
vue3.0使用百度地图
vueaplayer便于配置的音乐播放器vue2组件
08-08
vue-aplayer：便于配置的音乐播放器vue2组件
vue音乐播放器插件vue-aplayer的配置及其使用
热门推荐
xiaogezl的博客
04-21 3万+
昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件，由于个人有比较喜欢音乐，所以就拿过来玩一玩，感觉还是比较实用的，界面美观。 首先，我们先安装 npm install vue-aplayer --save ，之后在组件中引入  import VueAplayer from 'vue-aplayer'，下面就是源码，可供参考：
Vue.Draggable - 基于 Vue.js 丝般柔滑的拖拽排序组件
那些免费的砖
09-24 1041
截止发稿2020年8月10日，这可能是目前最好的拖拽排序解决方案了。 介绍 VueDraggable 是一个专门解决拖拽排序和拖拽分组的前端开源代码库。 在 jQuery 的时代，有很多动效非常流畅丝滑的拖拽排序插件，但在国内 Vue.js 起来后，却比较难找到一款像 Sortable.js 那样的组件，而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强组件。 特点 支持触摸设备，支持智能滚动； 支持拖拽和选择文本以及不同列表之间的拖拽； 拖拽和视图模型同步刷.
【Vue让Audio进度条同步】
m0_72815229的博客
11-15 320
【代码】【Vue让Audio进度条同步】
element + vue 写的 音乐播放器 可以控制进度条 暂停播放 声音大小 倍速
m0_58783911的博客
06-02 2471
element + vue 写的音乐播放器 可以控制进度条 暂停播放 声音大小 倍速复制在编辑器里删除多余的代码 大概样子 一个声音 一个下载 图标
vue-aplayer 音乐播放，实现播放与音乐列表
笃行
06-07 4304
最近现在个人博客上嵌入音乐播放，与是撸起袖子就干了起来，由于博客前端是基于Vue开发，所以在网上查了一下，说vue-aplayer使用起来不错，于是便用了起来，效果如下： 代码如下： 此代码可以直接使用，且里面音乐地址链接都是有效的 使用前提：安装vue-aplayer npm install vue-aplayer –save vue页面完整代码： <template> <div> <div style="padding:10px 0;">
vue项目基于vue-video-player实现rtmp直播流
Callme.MayJ 的博客
04-16 5998
vue播放器插件 项目要求： 我们做的是一个监控项目，需要实时监控某机器，播放器在监控页面可拖动。 插件选择： 项目是vue框架，播放器选择了vue-video-player插件， vue-video-player，其实就是 video.js 集成到 vue 中 ，视频流选择rtmp格式，实时性高，稳定性也高，但是依赖flash插件。 使用步骤 安装 vue-video-player ...
Vue项目使用vue-awesome-swiper实现移动端轮播图
斗师——Ace
02-28 3457
添加小程序，兑换各种视频教程/数据资源。 1.用vue-awesome-swiper（配置参数与swiper插件一样）做移动端的轮播图：参考https://github.com/surmon-china/vue-awesome-swiper。 2. 下载：npm install vue-awesome-swiper --save3. 引入：在main.js文件中 import...
vue-music-player:一款基于 Vue 的音乐播放器
05-10
vue-music-player 这是一个音乐播放器 安装 使用npm安装插件： npm i vue-music-player --save 然后，在您的 main.js 中，添加： import vueMusicPlayer from 'vue-music-player' Vue.use(vueMusicPlayer) 用法 直接通过方法调用即可： let option = { playList: [{ // 音频播放列表 src: '' // 音频路径 }], currentIndex: 0, // 当前播放音频，所在播放列表的下标 isPlay: false // 是否初始化的时候播放音频 } this.$initAudio(option) // 初始化 this.$playAudio() // 开始播放 this.$pauseAudio() //
vue2.0实现音乐/视频播放进度条组件
12-03
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释，具体内容如下 需求分析： ①：进度条随着歌曲的播放延长，歌曲播放完时长度等于黑色总进度条长度；时间实时更新。 ②：当滑动按钮时，实时更新播放时间，橙色进度条长度也会随着按钮的滑动而改变，当滑动结束时，橙色区域停留在滑动结束的位置，歌曲从当前进度开始播放。 ③：点击进度条，橙色进度条长度变为点击处至起点的长度，并从当前点开始播放歌曲。 大概思路： ①：左边的时间可以通过audio播放时派发的timeupdate事件获取，右边的时间为接口获取的当前歌曲的总时间。 ②：进度条子组件的长度通过父组件传入一个percent值计算，perce
Vue如何使用vue-awesome-swriper实现异形轮播
handesomeWriter的博客
12-11 2973
vue(3.x) 使用swriper 的轮播图（slide异形轮播为列）步骤如下： 安装：vue-awesome-swiper npm / cnpm i vue-awesome-swiper `在入口文件 main.js中执行如下操作 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' impor...
【笔记】vue实现音乐播放器
劲枫的博客
01-17 2107
1、eslintrc.js中添加符合编辑器的规则，参照这里 2、在build/webpack.base.conf.js中找到resolve设置别名，方便在引用路径的时候使用 3、安装依赖：babel-runtime（转移es6语法），fastclick（消除移动端300ms点击延迟），babel-polyfill（可以用es6的api） 4、npm install jsonp再封装成pr...
vue 音乐播放器，获取父级组件audio播放进度，并且根据进度条改变播放进度
茗霜的博客
08-12 2581
在写一个网易云音乐的历程中经历了各种困难，比如说音乐播放器，由于要让音乐在全局播放，所以讲audio标签放在最父级的组件中，然后到了播放音乐歌词路由（是放有audio标签页面的子组件）就无法将进度和进度条数据进行双向绑定，经过一早上的钻研，终于解决了这个问题。 首先，子组件： 父组件： ...
vue移动端的一款音频插件vue-aplayer
浩星
12-14 9440
前言： 之前在移动端使用audio的时候老是有各种问题，尤其是总时长一到移动端就拿不到，这里推荐自己使用的一款移动端音频组件vue-aplayer 官网入口：https://gitee.com/dreamteam_322/vue-aplayer 目录： 实现效果（我这里是在样式里面把功能注释了）： 实现步骤： 1、安装： 2、封装组件 aPlayer.vue ： 3、调用 template: js部分： 官方api文档： 安装 Node CDN 运行时要求 使用 ...
【最近项目小结】使用 Vue 实现一个简单的鼠标拖拽滚动效果插件
粉丝们务必加入微信粉丝群
12-10 1632
点赞再看，微信搜索**【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。 github 地址：https://github.com/qq449245884/vue-okr-tree 演示事例 http://www.longs.
Vue使用vue-aplayer实现音乐播放
搬运工
06-07 6377
Vue Nuxt 使用 vue-aplayer 组件实现音乐播放！
Vue使用vue2-highcharts实现排名图表展示
<vue-highcharts :options="options" ref="maxLineCharts"></vue-highcharts> <vue-highcharts :options="options" ref="minLineCharts"></vue-highcharts> ``` 这里的`ref`属性用于在Vue实例中引用这些组件，以便于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值