vue-audio-visualize

基于vue3的一款音频可视化组件。

安装

npm i vue-audio-visualize

引入

import VueAudioVisualize from 'vue-audio-visualize'
import 'vue-audio-visualize/style.css'

const app = createApp(App)
app.use(VueAudioVisualize)

音频可视化组件

使用

将音频可视化，增强视觉

<AudioVisualize :dir="Music" :color1="'#a8edea'"></AudioVisualize>

属性

| 属性 | 说明 | 类型 | 默认值 | | --------- | ------------------------------------------------------------ | ----------------- | ------- | | v-model | 绑定值，用于是否展示播放组件（ps：绑定数据请使用响应式数据。如:ref()） | boolean | false | | dir | 音频路径 | string | — | | direction | 音频方向，1：从下往上；2：居中；负数：从上往下 | number | 2 | | color1 | 颜色1 | string | — | | color2 | 颜色2（当颜色2存在时为渐变色） | srting|undefined | — | | height | 高度 | number | 300 | | bjcolor | 设置可视化播放工具背景颜色 | string | #ffffff |

外部方法

通过给组件绑定ref，可调用组件方法

| 方法名 | 说明 | 类型 | | ------ | ---- | ---- | | play | 播放 | — | | pause | 暂停 | — |