语音消息实现（聊天向）

语音消息实现记录下：

SpringBoot+Vue3客服项目，网页录制发送语音消息

Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口

2fps/recorder github地址

Recorder的API

语音测试地址

[Web] 4分钟搭建一个简洁好看的 WebSocket 网页聊天室（代码已经fork）

南生论坛中有聊天部分

风宇博客聊天

Demo版本

前端

页面效果

安装js-audio-recorder

npm install [email protected]

代码

<template>
    <div class="chat-box">
    
        <div class="btn-box">
            <button @mousedown="startRecord" @mouseup="stopRecord">
                <i :class="[{ 'iconfont': true }, isRecording ? 'icon-maikefeng' : 'icon-maikefeng-xianxing']">i>
            button>
            <button @click="playAudio">播放音频button>
            <button @click="downloadAudio">下载音频button>
        div>
        
        <div>
        
            <hr />
            
            <div class="block-box">
                <span>audio标签+以src的方式手动播放span>
                <audio src="http://127.0.0.1:8081/file/audio/1686623639628.wav" controls preload="true">audio>
            div>
            
            <div>
            	
                <audio ref="hiddenAudioRef" :src="autoRemoteSrc" class="hide">audio>
                <button @click="playRemoteAudio">播放指定的远程音频button>
            div>
            
        div>
        
    div>
template>

<script>

import Recorder from 'js-audio-recorder'

export default {

    name: 'Chat',
    
    data() {
        return {
        	// 当前是否正在录制音频
            isRecording: false,
			// 播放远程音频的url
            autoRemoteSrc: ''
        }
    },
    
    mounted() {
        this.recorder = new Recorder({
            sampleBits: 16,                 // 采样位数，支持 8 或 16，默认是16
            sampleRate: 16000,              // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
            numChannels: 1,                 // 声道，支持 1 或 2， 默认是1
            // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
        });
        window.recorder = this.recorder
    },
    methods: {
    
        // 开始录制音频
        startRecord() {
            this.isRecording = true
            this.recorder.start().then(() => {
                // 开始录音
            }, (error) => {
                // 出错了
                console.log(`${error.name} : ${error.message}`);
            });
        },
        
        // 结束录制音频
        stopRecord() {
            console.log(this.recorder.duration); // 获取录音的总时长
            console.log(this.recorder.fileSize); // 录音文件大小（单位：字节）
            this.isRecording = false
            this.recorder.stop()
        },
        
        // 播放刚刚录制的音频
        playAudio() {
            if (this.recorder.duration <= 0) {
                alert('请先录制')
            }
            this.recorder.play()
        },
        
        // 下载刚刚录制的音频到本地
        downloadAudio() {
            if (this.recorder.duration <= 0) {
                alert('请先录制')
            }
            let wavBlob = this.recorder.getWAVBlob()
            const newWAVbolb = new Blob([wavBlob], { type: 'audio/wav' })
            const wavFile = new File([newWAVbolb], new Date().getTime() + '.wav')
            let wavFileURL = window.URL.createObjectURL(wavFile)
            let tmpLink = document.createElement('a')
            tmpLink.style.display = 'none'
            tmpLink.href = wavFileURL
            tmpLink.setAttribute('download', wavFile.name)
            document.body.appendChild(tmpLink)
            tmpLink.click()
            document.body.removeChild(tmpLink)
            window.URL.revokeObjectURL(wavFileURL)
        },
        
        // 播放远程音频
        playRemoteAudio() {
            this.$refs.hiddenAudioRef.src = 'http://127.0.0.1:8081/file/audio/1686622424132.wav'
            this.$refs.hiddenAudioRef.play()
            window.hiddenAudioRef = this.$refs.hiddenAudioRef
        }
    }
}
script>

<style style="scoped">
@import url("//at.alicdn.com/t/c/font_4119031_hzm54m8oys.css");

.chat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.btn-box {
    margin-bottom: 10px;
}

button {
    min-width: 100px;
    height: 50px;
    background: #fff;
    border: 1px solid #ccc;
    margin-right: -1px;
    cursor: pointer;
}

.block-box {
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
style>

后端

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/file/**")
                .addResourceLocations("file:/D:/Projects/dynamic-datasource-demo/file/");
    }
}