超好看 vue2.x 音频播放器组件Vue-APlayer

上篇文章给大家分享了视频播放器组件vue-aliplayer，这次给大家推荐一款音频插件VueAplayer。

vue-aplayer 一个好看又好用的轻量级 vue.js 音乐播放器组件。清爽漂亮的UI主题，支持随意拖拽位置。

安装

$ npm i vue-aplayer -S

使用

<template>
  <div id="app">
    <aplayer
      :music="{
        title: 'secret base~君がくれたもの~',
        artist: 'Silent Siren',
        src: 'https://xxx.com/aplayer/secretbase.mp3',
        pic: 'https://xxx.com/aplayer/secretbase.jpg',
        lrc: 'https://xxx.com/aplayer/secretbase.lrc'
      }"
      :list="musicList"
      autoplay
      shuffle
      repeat="repeat-all"
      show-lrc
    />
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'

export default {
  components: {
    Aplayer
  },
  data() {
    return {
      musicList: [
        {
          title: '前前前世',
          artist: 'RADWIMPS',
          src: 'https://xxx.dogecdn.com/yourname.mp3',
          pic: 'https://xxx.dogecdn.com/yourname.jpg',
          lrc: 'https://xxx.dogecdn.com/yourname.lrc',
        },
        {
          title: '光るなら.m3u8',
          artist: 'Goose house',
          src: 'https://xxx.dogecdn.com/hls/hikarunara.m3u8',
          pic: 'https://xxx.dogecdn.com/hikarunara.jpg',
          lrc: 'https://xxx.dogecdn.com/hikarunara.lrc',
        },
        {
          title: '回レ！雪月花',
          artist: '小倉唯',
          src: 'https://xxx.dogecdn.com/snowmoonflowers.mp3',
          pic: 'https://xxx.dogecdn.com/snowmoonflowers.jpg',
          lrc: 'https://xxx.dogecdn.com/snowmoonflowers.lrc',
        },
        {
          title: 'あっちゅ～ま青春!',
          artist: '七森中☆ごらく部',
          src: 'https://xxx.dogecdn.com/yuruyuri.mp3',
          pic: 'https://xxx.dogecdn.com/yuruyuri.jpg',
          lrc: 'https://xxx.dogecdn.com/yuruyuri.lrc',
        },
      ],
    }
  }
}
</script>

参数配置

music props 包含了当前播放歌曲的如下信息。

为了提升网站B格，可以尝试在自己的网站加上这个音频小插件。

# 演示地址
https://vue-aplayer.js.org/

# 仓库地址
https://github.com/SevenOutman/vue-aplayer

好了，今天就分享到这里。希望对你有些帮助哈。