hxz-mini-audio-player

hxz-mini-audio-player是一款基于vue3的音乐播放器，支持最多九首歌曲，至少一首，界面全部自定义，支持上一曲下一曲、支持调整音量，通过滑块或者将鼠标放到滑块上滚动滚轮，可以实现播放进度控制和音量大小控制。点击封面图，播放对应的音乐，音乐专辑图会显示在下方并自动播放，播放中封面图会自动旋转。

打包发布

npm run build
npm publish

安装

// 安装本插件
npm install hxz-mini-audio-player --save

局部引入本插件（建议）

// 引入本插件
import HxzMiniAudioPlayer from "hxz-mini-audio-player/dist/hxz-mini-audio-player"
import 'hxz-mini-audio-player/dist/style.css'

// 在components中加入本插件
components: {HxzMiniAudioPlayer},

全局引入本插件

// main.js 引入本插件
import HxzMiniAudioPlayer from "hxz-mini-audio-player/dist/hxz-mini-audio-player"
import 'hxz-mini-audio-player/dist/style.css'

app.use(HxzMiniAudioPlayer)

使用插件

// 在template中加入本插件
<hxz-mini-audio-player />

参数

参数名 | 默认值 | 类型 | 解释 :---: | :---: | :---: | :---: list | [] | Array | 播放列表，list的item参数见下方

上传接口参数

参数名 | 类型 | 解释 :---: | :---: | :---: title | String | 歌曲名，必填 cover | String | 封面图路径，必填 url | String | 歌曲地址，必填

事件

事件名 | 参数 | 解释 :---: | :---: | :---: play | null | 播放器播放事件 pause | null | 播放器暂停事件

方法

方法名 | 参数 | 解释 :---: | :---: | :---: onPlayPause | state | 播放方法

使用示例

效果：

代码：

<template>
  <div>
    <HxzMiniAudioPlayer :list="list" @play="play" @pause="pause"></HxzMiniAudioPlayer>
  </div>
</template>

<script setup>
function play() {
  alert('开始播放')
}

function pause() {
  alert('暂停播放')
}

const list = [
  {
    cover: '/songs/cover1.png',
    title: '盛夏',
    url: '/songs/song1.mp3',
  },
  {
    cover: '/songs/cover2.png',
    title: '当潮不让',
    url: '/songs/song2.mp3',
  },
  {
    cover: '/songs/cover3.png',
    title: '果汁分你一半',
    url: '/songs/song3.mp3',
  },
  {
    cover: '/songs/cover4.png',
    title: '逆战',
    url: '/songs/song4.mp3',
  },
  {
    cover: '/songs/cover5.png',
    title: '淋雨一直走',
    url: '/songs/song5.mp3',
  },
  {
    cover: '/songs/cover6.png',
    title: '浮夸',
    url: '/songs/song6.mp3',
  },
  {
    cover: '/songs/cover7.png',
    title: '让我欢喜让我忧',
    url: '/songs/song7.mp3',
  },
  {
    cover: '/songs/cover8.png',
    title: '练习',
    url: '/songs/song8.mp3',
  },
  {
    cover: '/songs/cover9.png',
    title: '屋顶',
    url: '/songs/song9.mp3',
  },
]
</script>