Vue Audio Wave ZY

一个 Vue 3 实时音频可视化组件，支持麦克风输入和动态波形显示。

特性

• 🎤 实时麦克风音频捕获
• 📊 动态波形可视化
• 🎨 多颜色配置支持（1-3种颜色）
• 🌊 自然波浪效果
• 📱 响应式设计
• 🔧 易于集成
• ⚡ 高性能渲染
• 🎯 VoiceCloneFlow 风格配置

安装

npm install vue-audio-wave-zy
# 或
yarn add vue-audio-wave-zy
# 或
pnpm add vue-audio-wave-zy

使用方法

全局注册

import { createApp } from 'vue'
import VueAudioWaveZy from 'vue-audio-wave-zy'
import App from './App.vue'

const app = createApp(App)
app.use(VueAudioWaveZy)
app.mount('#app')

局部注册

<template>
  <div>
    <!-- 默认配置（VoiceCloneFlow 风格） -->
    <zy-audio-wave
      ref="audioWaveRef"
      @start="onStart"
      @stop="onStop"
      @volume-change="onVolumeChange"
      @error="onError"
    />

    <!-- 自定义配置 -->
    <zy-audio-wave
      :width="400"
      :height="80"
      :bar-count="40"
      :bar-width="4"
      :bar-gap="3"
      :min-height="10"
      :max-height="80"
      :colors="['#67C23A', '#E6A23C', '#4A90E2']"
      :sensitivity="1.5"
      @start="onStart"
      @stop="onStop"
      @volume-change="onVolumeChange"
      @error="onError"
    />

    <button @click="toggleRecording">
      {{ isRecording ? '停止' : '开始' }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ZyAudioWave } from 'vue-audio-wave-zy'
import 'vue-audio-wave-zy/dist/index.css'

const audioWaveRef = ref()
const isRecording = ref(false)

const toggleRecording = async () => {
  await audioWaveRef.value.toggle()
}

const onStart = () => {
  isRecording.value = true
  console.log('录音开始')
}

const onStop = () => {
  isRecording.value = false
  console.log('录音停止')
}

const onVolumeChange = (volume) => {
  console.log('音量变化:', volume)
}

const onError = (error) => {
  console.error('错误:', error)
}
</script>

颜色配置

单色配置

<zy-audio-wave :colors="['#9b59b6']" />

双色配置

<zy-audio-wave :colors="['#f39c12', '#e74c3c']" />

三色配置（推荐）

<zy-audio-wave :colors="['#67C23A', '#E6A23C', '#4A90E2']" />

颜色会根据音量高度自动分配：

• 1种颜色：音量 > 20% 时显示该颜色
• 2种颜色：低音量显示第1种，高音量显示第2种
• 3种颜色：低音量显示第1种，中音量显示第2种，高音量显示第3种

API

Props

属性	类型	默认值	说明
width	number | string	400	组件宽度
height	number | string	80	组件高度
barCount	number	40	波形条数量
barWidth	number	4	波形条宽度(px)
barGap	number	3	波形条间距(px)
minHeight	number	10	波形条最小高度(px)
maxHeight	number	80	波形条最大高度(px)
colors	Array<string>	['#67C23A', '#E6A23C', '#4A90E2']	波形条颜色数组（1-3种颜色）
sensitivity	number	1.5	灵敏度(0.1-10)
autoStart	boolean	false	是否自动开始录音

Events

事件名	参数	说明
start	-	开始录音时触发
stop	-	停止录音时触发
error	Error	发生错误时触发
volumeChange	number	音量变化时触发

Methods

通过 ref 可以调用以下方法：

方法名	参数	返回值	说明
start()	-	Promise<void>	开始录音
stop()	-	void	停止录音
toggle()	-	Promise<void>	切换录音状态
isRecording	-	boolean	当前录音状态
currentVolume	-	number	当前音量

示例

基础用法

<template>
  <zy-audio-wave />
</template>

自定义样式

<template>
  <zy-audio-wave
    :width="500"
    :height="100"
    :bar-count="60"
    :bar-width="4"
    :bar-gap="3"
    :min-height="5"
    :max-height="80"
    base-color="#ddd"
    active-color="#ff6b6b"
    :sensitivity="2"
  />
</template>

控制录音

<template>
  <div>
    <zy-audio-wave ref="audioWave" />
    <div>
      <button @click="start">开始</button>
      <button @click="stop">停止</button>
      <button @click="toggle">切换</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const audioWave = ref()

const start = () => audioWave.value.start()
const stop = () => audioWave.value.stop()
const toggle = () => audioWave.value.toggle()
</script>

浏览器兼容性

• Chrome 66+
• Firefox 60+
• Safari 11.1+
• Edge 79+

注意事项

1. 需要用户授权麦克风权限
2. 必须在 HTTPS 环境下使用（本地开发除外）
3. 某些浏览器可能需要用户交互后才能访问麦克风

许可证

MIT License

更新日志

1.0.0

• 初始版本发布
• 支持实时音频波形可视化
• 提供完整的 TypeScript 支持