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

一个优雅的搬砖人

已于 2024-01-17 13:27:19 修改

阅读量6k

点赞数 9

分类专栏： Nuxt 文章标签： vue.js javascript 前端

于 2022-06-07 10:19:21 首次发布

本文链接：https://blog.csdn.net/weixin_48306950/article/details/125159132

版权

Nuxt 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文使用 vue-aplayer 组件实现音乐播放！

实现样式：

引入依赖

npm install vue-aplayer --save

注意

本文使用的是 vue-aplayer 并不是 @moefe/vue-aplayer，两者之间有些配置项不同，这里暂时不做赘述。

这里也可能会发生一个警告

Can't resolve 'hls.js' in 'D:\MyProject\private-ashcan\frontend\node_modules\vue-aplayer\dist'

解决办法是引入 hls.js 依赖

npm install hls.js --save

要确保 pom.xml 文件中有 hls.js 才是引入成功，如果引不进来，可以直接将 "hls.js": "^0.14.17" 复制到 pom.xml 文件中。

页面使用

首先在页面引入 vue-aplayer 组件，然后如下使用；

<template>
    <div>
        <a-player
          :music="audio[0]"
          :list="audio"
          autoplay
        />
    </div>
</template>

<script>
import APlayer from 'vue-aplayer'

export default {
    components: { APlayer },
    data () {
        return {
          // 音频列表
          audio: [
            {
              title: '天空之城',
              artist: '黄叶',
              url: 'http://xxx.mp3',
              pic: 'http://xxx.jpg',
              lrc: '[00:12.09]作词：林夕[00:12.33]作曲：徐伟贤[00:14.40]对我好对我好'
            }
          ]
        }
    },
}
</script>

配置项说明

Props

名称	类型	默认值	说明
music	Object	必填项	当前播放的音乐。具体值请看下面的 music
list	Array	[]	播放列表。如果 list 不是空数组，播放列表就会显示出来。
mini	Boolean	false	迷你模式
float	Boolean	false	浮动模式。允许在页面随意拖放播放器
showLrc	Boolean	false	是否显示歌词
mutex	Boolean	true	是否在该播放器播放时暂停其他播放器
theme	String	'#41b883'	主题色。如果当前歌曲也设置了 theme 则以歌曲的为准
shuffle	Boolean	false	随机播放
repeat	String	'no-repeat'	轮播模式。值可以是 'repeat-one'（单曲循环）、'repeat-all'（列表循环）或者 'no-repeat'（不循环）
listMaxHeight	String	none	播放列表面板最大高度
listFolder	Boolean	false	默认收起播放列表

music

名称	默认值	说明
src	必填项	音频文件的路径
title	'Untitled'	歌曲名称
artist	'Untitled'	演唱者
pic	none	封面图片路径
lrc	none	歌词或者歌词文件的路径
theme	none	歌曲的主题色，会覆盖播放器的主题色

event

事件名	参数	说明
play	none	开始播放时触发
pause	none	暂停时触发
canplay	none	当数据支持播放时触发
playing	none	播放时会定时触发
ended	none	停止播放时触发
error	none	错误出现时触发
update:mode	none	mode 属性更改时触发

动态获取音乐自动播放问题

在动态获取音乐信息时，需要注意自动播放失效的问题；个人理解是因为在还没有取回音乐信息时，页面进行了渲染，播放器已经被渲染好了。

解决办法是使用 v-if ，在查询到音乐信息时再加载播放器，另外我也额外给了 audio 一个初始值，避免报错；

注意，在 beforeDestroy 时将 isShow 重置为 false，这一步也不能省略；如果是 dialog，则在关闭时重置即可。

<template>
    <a-player
        v-if="isShow"
        :music="audio[0]"
        :list="audio"
        :showlrc="true"
        float
        autoplay
        mode="circulation"
        repeat="repeat-all"
        :style="{ width: '500px', marginLeft: '500px' }"
    />
</template>

<script>
import APlayer from 'vue-aplayer'

export default {
  name: 'DefaultLayout',
  components: { APlayer },
  data () {
    return {
      // 音频列表
      audio: [
        {
          title: '天空之城',
          artist: '黄叶',
          url: 'http://music.163.com/song/media/outer/url?id=1947208581.mp3',
          pic: 'http://p2.music.126.net/O-G03h3Y18Hb75ZzFXrxXg==/109951167515869204.jpg',
          lrc: '[00:12.09]作词：林夕[00:12.33]'
        }
      ],
      isShow: false
    }
  },
  mounted () {
    this.getMusic()
  },
  beforeDestroy () {
    this.isShow = false
  },
  methods: {
    getMusic () {
      this.$nextTick(() => {
        this.$axios.$request({
          url: '/songs/list',
          method: 'get'
        }).then((res) => {
          this.audio = res
          // 如果不使用 v-if，会导致播放器已经渲染好了才给值，那自动播放会失效
          this.isShow = true
        })
      })
    }
  }
}
</script>