node版本

node v18+

启动项目

npm i vue-sound-wave

使用示例

<script setup>
import { ref } from 'vue';
import SoundWave from 'vue-sound-wave';
const mkRef = ref(null);
const isRecord = ref(false);
const handleToggle = () => {
  mkRef.value.togglePlay();
  isRecord.value = !isRecord.value;
};

</script>

<template>
 <button @click="handleToggle">发送语音</button>
 <SoundWave ref="mkRef" :isRecord="isRecord"></SoundWave>
</template>

<style scoped>
</style>

基础可选配置

// 是否开启
isRecord: false,
// 遮罩层样式
overlayStyle:{
    background: 'rgba(0, 0, 0, 0.15)',
    width: '150px',
    height: '50px',
    minWidth: '150px',
    padding: '15px 10px',
    boxSizing:'border-box',
},
// 声音样式
waveOptions:{
    waveColor: "#4CAF50",
    progressColor: "#52C41A",
    height: 20,
    barWidth: 2,
    barGap: 3,
    barRadius: 2,
    barMinHeight: 1,
    normalize: true,
    interact: false,
    fillParent: true,
    pixelRatio: 1,
    minPxPerSec: 50,
    cursorWidth: 0,
    responsive: true,
    partialRender: true,
    removeMediaControl: true,
    hideScrollbar: true,
}

说明

该插件包是基于vue3.0 + wavesurferJs进行二开，只针对麦克风音波效果开发，不做音频文件导出，如有需要请自行封装。

效果图

效果图

源码地址

源码地址