AI聊天之语音输入

AI聊天之语音输入

                        <el-tooltip
                            :content="
                                !isRecording
                                    ? '点击语音输入'
                                    : '再次点击停止语音输入'
                            "
                            placement="top"
                        >
                            <el-button
                                :class="[
                                    'voice-btn',
                                    { recording: isRecording }
                                ]"
                                @click="startRecording"
                            >
                                <!-- <i class="el-icon-microphone"></i> -->
                                <img
                                    src="/assets/image/microphone.png"
                                    class="mic_icon"
                                    alt="语音输入"
                                    v-if="!isRecording"
                                />
                                <img
                                    src="/assets/image/microphone_close.png"
                                    style="width: 20px;height: 20px;"
                                    alt="停止语音输入"
                                    v-else
                                />
                            </el-button>
                        </el-tooltip>

录音使用的是navigator.mediaDevices 如果遇到一些问题可以查看其他文章

 async startRecording() {
            if (this.isAIResponding) return; // 判断是否正在回答
            if (this.isRecording) {
                this.stopRecording();
                return;
            }
            this.isRecording = true;
            // 请求麦克风权限
            try {
                // 弹窗提示正在语音输入，再次点击停止语音输入
                this.mediaStream = await navigator.mediaDevices.getUserMedia({
                    audio: true
                });
                this.mediaRecorder = new MediaRecorder(this.mediaStream);

                // 监听录音数据事件
                this.mediaRecorder.addEventListener(
                    "dataavailable",
                    async event => {
                        if (event.data.size > 0) {
                            console.log(event.data);

                            this.audioChunks.push(event.data);
                        }
                    }
                );
                this.mediaRecorder.onstop = () => {
                    console.log("录音停止1");
                    let that = this;
                    that.isRecording = false;
                    // 处理录制的音频数据
                    if (that.audioChunks.length > 0) {
                        that.uploadAudioFile(that.audioChunks[0], audioUrl => {
                            that.audioChunks = [];
                            console.log("音频地址:", audioUrl.src);
                            //获取到音频地址可以使用服务端接口也可以使用第3方api转换文本发送，也可以直接发送音频
                            that.sendMessage();
                        });
                    }
                };

                // 开始录音
                this.mediaRecorder.start();
            } catch (error) {
                this.$message({
                    showClose: true,
                    message: "获取麦克风权限失败",
                    type: "error"
                });
                console.error("获取麦克风权限失败:", error);
                this.isRecording = false;
            }
        },
           async stopRecording() {
            let that = this;
            if (that.mediaRecorder) {
                that.mediaRecorder.stop();
                that.mediaRecorder = null;
            }
            // 停止流
            if (that.mediaStream) {
                that.mediaStream.getTracks().forEach(track => track.stop());
                that.mediaStream = null;
            }
        },