特效介绍
hxz-mini-audio-player是一款基于vue3的迷你音乐播放器，界面全部自定义，支持上一曲下一曲、支持调整音量，通过滑块或者将鼠标放到滑块上滚动滚轮，可以实现音量大小控制。点击封面图，播放音乐，播放中封面图会自动旋转。支持播放暂停事件。
使用方法
安装
# 安装本插件 npm install hxz-mini-audio-player --save
局部引入本插件（建议）
// 引入本插件
import HxzMiniAudioPlayer from "hxz-min-audio-player/dist/hxz-min-audio-player"
import 'hxz-min-audio-player/dist/style.css'
// 在components中加入本插件
components: {HxzMiniAudioPlayer},全局引入本插件
// main.js 引入本插件 import HxzMiniAudioPlayer from "hxz-min-audio-player/dist/hxz-min-audio-player" import 'hxz-min-audio-player/dist/style.css' app.use(HxzMiniAudioPlayer)
使用插件
// 在template中加入本插件 <hxz-min-audio-player />
参数
| 参数名 | 默认值 | 类型 | 解释 |
|---|---|---|---|
| list | [] | Array | 播放列表，list的item参数见下方 |
list的item参数
| 参数名 | 类型 | 解释 |
|---|---|---|
| title | String | 歌曲名，必填 |
| cover | String | 封面图路径，必填 |
| url | String | 歌曲地址，必填 |
方法
| 方法名 | 参数 | 解释 |
|---|---|---|
| play | null | 播放器播放事件 |
| pause | null | 播放器暂停事件 |
代码
<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>