vue3使用‘js-audio-recorder‘插件实现录音功能，回传pcm文件
<template><div class="audio-recorder"><el-button type="primary" @click="startRecordAudio">开始录音</el-button><div class="duration">录音时长：{{ duration.toFixed(4) }} 秒</div><el-button type="danger" @click="stopRecordAudio">停止录音</el-button><el-button type="success" @click="playRecordAudio">播放录音</el-button><!-- <el-button type="info" @click="getPCBRecordAudioData">获取PCM录音数据</el-button><el-button type="info" @click="downloadPCBRecordAudioData">下载PCM录音文件</el-button><el-button type="info" @click="getWAVRecordAudioData">获取WAV录音数据</el-button><el-button type="info" @click="downloadWAVRecordAudioData">下载WAV录音文件</el-button> --><el-button type="info" @click="uploadWAVData">上传PCM录音数据</el-button></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import Recorder from 'js-audio-recorder'
import { shoutRecord } from '/@/api/wayline'
import { ELocalStorageKey } from '/@/types'
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)
// 响应式变量定义
const recorder = ref(null)
const duration = ref(0)
const isRecording = ref(false)
// 初始化录音实例
const initRecorder = () => {recorder.value = new Recorder({sampleBits: 16, // 采样位数，支持 8 或 16，默认是16sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000numChannels: 1, // 声道，支持 1 或 2， 默认是1})// 监听录音时长变化recorder.value.onprocess = (params) => {console.log('时长更新：', params.duration) // 增加打印，确认是否触发duration.value = params.duration}
}// 开始录音
const startRecordAudio = async () => {if (isRecording.value) returntry {await Recorder.getPermission()console.log('开始录音')recorder.value.start()isRecording.value = trueduration.value = 0} catch (error) {ElMessage({message: '请先允许该网页使用麦克风',type: 'warning',})console.error(`${error.name} : ${error.message}`)}
}// 停止录音
const stopRecordAudio = () => {if (!isRecording.value) returnconsole.log('停止录音')recorder.value.stop()isRecording.value = false
}// 播放录音
const playRecordAudio = () => {console.log('播放录音')recorder.value.play()
}// 获取PCM录音数据
const getPCBRecordAudioData = () => {const pcmBlob = recorder.value.getPCMBlob()console.log('PCM录音数据：', pcmBlob)
}// 获取WAV录音数据
const getWAVRecordAudioData = () => {const wavBlob = recorder.value.getWAVBlob()console.log('WAV录音数据：', wavBlob)
}// 下载PCM录音文件
const downloadPCBRecordAudioData = () => {recorder.value.downloadPCM('录音文件')
}// 下载WAV录音文件
const downloadWAVRecordAudioData = () => {recorder.value.downloadWAV('录音文件')
}// 上传wav录音数据
const uploadWAVData = () => {const wavBlob = recorder.value.getWAVBlob()// 创建一个formData对象const formData = new FormData()// 此处获取到blob对象后需要设置fileName满足当前项目上传需求，其它项目可直接传把blob作为file塞入formDataconst newbolb = new Blob([wavBlob], { type: 'audio/cpm' })// 获取当时时间戳作为文件名const fileOfBlob = new File([newbolb], new Date().getTime() + '.cpm')formData.append('file', fileOfBlob)console.log('file', fileOfBlob)shoutRecord(workspaceId, formData).then((response) => {console.log('response--', response)})
}// 组件挂载时初始化录音实例
onMounted(() => {initRecorder()
})
</script><style scoped lang="scss">
.audio-recorder {padding: 20px;.duration {margin: 10px 0;color: #666;}.el-button {margin: 0 10px 10px 0;}
}
</style>
需要注意的是一定要安装i18n，vue3安装@9版本，npm install vue-i18n@9 ，全局应用main.ts
import { createI18n } from 'vue-i18n'import en from './assets/langs/en-US.json'
import cn from './assets/langs/zh-CN.json'
const i18n = createI18n({locale: 'cn',fallbackLocale: 'en', // 建议添加一个备用语言messages: {en: en, // 或者直接简写为 encn: cn // 或者直接简写为 cn},globalInjection: true // 允许在模板中使用 $t
})app.use(i18n)如需其他功能可参考https://blog.51cto.com/u_16213666/10763022
https://blog.51cto.com/u_16213666/10763022
如果你的vue3+ts，可能会有与js插件冲突发生最好使用适配的录音插件，可参考
https://blog.csdn.net/2301_80636534/article/details/154829757?spm=1001.2014.3001.5501https://blog.csdn.net/2301_80636534/article/details/154829757?spm=1001.2014.3001.5501