vue-aplayer 音乐播放,实现播放与音乐列表

最近现在个人博客上嵌入音乐播放,与是撸起袖子就干了起来,由于博客前端是基于Vue开发,所以在网上查了一下,说vue-aplayer使用起来不错,于是便用了起来,效果如下:
在这里插入图片描述

代码如下:

此代码可以直接使用,且里面音乐地址链接都是有效的

使用前提:安装vue-aplayer

npm install vue-aplayer –save

vue页面完整代码:

<template>
  <div>
    <div style="padding:10px 0;">
      <aplayer autoplay :music="{
   
          title: '剑心',
          artist: '张杰',
          src: 'http://m7.music.126.net/20200607161403/ed714b7dbaaee6f862184ff96da280bf/ymusic/3e70/4277/5715/abf7aaf8e92b13f339a59dfc6940499d.mp3',
          pic: 'https://p2.music.126.net/ixIs5kkukgNYMmeDsc35_g==/29686813955450.jpg'
      }" :list="musicList">
      </aplayer>
    </div>

  </div>
</template>

<script>
  
  • 6
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值