本文使用 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

名称类型默认值说明
musicObject必填项当前播放的音乐。具体值请看下面的 music
listArray[]播放列表。如果 list 不是空数组,播放列表就会显示出来。
miniBooleanfalse迷你模式
floatBooleanfalse浮动模式。允许在页面随意拖放播放器
showLrcBooleanfalse是否显示歌词
mutexBooleantrue是否在该播放器播放时暂停其他播放器
themeString'#41b883'主题色。如果当前歌曲也设置了 theme 则以歌曲的为准
shuffleBooleanfalse随机播放
repeatString'no-repeat'轮播模式。值可以是 'repeat-one'(单曲循环)、'repeat-all'(列表循环)或者 'no-repeat'(不循环)
listMaxHeightStringnone播放列表面板最大高度
listFolderBooleanfalse默认收起播放列表

music

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

event

事件名参数说明
playnone开始播放时触发
pausenone暂停时触发
canplaynone当数据支持播放时触发
playingnone播放时会定时触发
endednone停止播放时触发
errornone错误出现时触发
update:modenonemode 属性更改时触发

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

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

解决办法是使用 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>

获取音乐

把我这次获取音乐信息的方式和大家分享一下;本文以网易云为例。

首先在网站中打开网易云,随便选择一首歌进到详细页,在网址把这首歌的 id 复制下来;

然后打开这个网站 全网音乐免费下载 - 音乐搜索,音乐在线试听,下载,在线解析网 (sonimei.cn)

选择音乐ID、网易,将 id 粘贴到输入框后,点击 Get

然后就可以得到这首音乐的信息;

封面这里没有直接给出路径,但是我们只要 F12 一下就可以啦

感谢

如果对您有帮助,麻烦点赞收藏鼓励一下,栓q!

Logo

前往低代码交流专区

更多推荐