当前位置：首页 > news >正文

VUE+SPRINGBOOT从0-1打造前后端-前后台系统-语音评测

news 2025/8/13 13:06:51

语音评测技术作为人工智能领域的重要应用之一，在教育、语言学习等领域发挥着越来越重要的作用。本文将详细介绍如何基于WebSocket协议和讯飞开放平台实现一个实时语音评测系统，该系统能够对用户朗读的中英文内容进行实时评测并给出评分反馈。

系统架构概述

整个语音评测系统采用前后端分离的架构设计：

前端部分：基于Vue.js框架和Element UI组件库实现用户界面
通信层：使用WebSocket协议与讯飞语音评测服务建立实时连接
评测服务：依托讯飞开放平台的语音评测API实现核心评测功能

系统工作流程如下：

用户在前端选择评测题型并输入/获取评测文本
前端通过WebSocket与讯飞服务建立连接
用户开始朗读，系统实时采集音频数据
音频数据通过WebSocket发送到评测服务
服务返回评测结果并在前端展示

关键技术实现

1. 前端界面设计

系统使用Element UI组件库构建了直观的用户界面，主要分为三个部分：

<template><div class="Evaluate-container"><!-- 评测题型列表 --><div><el-row :gutter="10" style="border-bottom: 1px dashed grey"><!-- 各种题型卡片 --></el-row></div><!-- 合成文本区域 --><div><el-input type="textarea" v-model="iseContent" rows="15"></el-input></div><!-- 操作按钮 --><el-button type="primary" @click="recordEvaluate">录音评测</el-button><el-button type="danger" @click="stopScore">停止打分</el-button></div>
</template>

题型选择区采用卡片式布局，每种题型包含：

图标标识
题型名称
适用语言和人群标签
单选按钮

2. 音频采集与处理

系统使用recorder.js库实现浏览器端的音频采集：

// 初始化录音工具
let recorder = new Recorder("../../recorder")
recorder.onStart = () => {console.log("开始录音了")
}
recorder.onStop = () => {console.log("结束录音了")
}// 帧录音回调
recorder.onFrameRecorded = ({isLastFrame, frameBuffer}) => {if (!isLastFrame && wsFlag) {// 发送中间帧数据const params = {"business": {"cmd": "auw","aus": 1,"aue": "raw"},"data": {"status": 1,"data": toBase64(frameBuffer),"data_type": 1,"encoding": "raw"}}wsTask.send(JSON.stringify(params))} else {// 发送结束帧const params = {"business": {"cmd": "auw","aus": 4,"aue": "raw"},"data": {"status": 2,"data": ""}}wsTask.send(JSON.stringify(params))}
}

音频参数配置：

采样率：16000Hz
帧大小：1280字节
编码格式：原始PCM(raw)

3. WebSocket通信实现

系统与讯飞语音评测服务的通信基于WebSocket协议，主要流程包括：

建立连接：获取鉴权URL并创建WebSocket连接

async wsInit() {let _this = this;let reqeustUrl = await _this.getWebSocketUrl()wsTask = new WebSocket(reqeustUrl);wsTask.onopen = function() {// 发送第一帧数据let params = {"common": { "app_id": atob(_this.user.appid) },"business": {"rst": "entirety","ise_unite": "1","category": _this.category,"ent": _this.ent,"text": _this.utf8bom + _this.iseContent},"data": { "status": 0, "data": "" }}wsTask.send(JSON.stringify(params))// 开始录音recorder.start({ sampleRate: 16000, frameSize: 1280 });}
}

鉴权处理：使用HMAC-SHA256算法生成签名

getWebSocketUrl() {return new Promise((resolve, reject) => {var url = this.URL;var host = "ise-api.xfyun.cn";var apiKeyName = "api_key";var date = new Date().toGMTString();var algorithm = "hmac-sha256";var headers = "host date request-line";var signatureOrigin = `host: ${host}\ndate: ${date}\nGET /v2/open-ise HTTP/1.1`;var signatureSha = CryptoJS.HmacSHA256(signatureOrigin, atob(this.user.apisecret));var signature = CryptoJS.enc.Base64.stringify(signatureSha);var authorizationOrigin = `${apiKeyName}="${atob(this.user.apikey)}", algorithm="${algorithm}", headers="${headers}", signature="${signature}"`;var authorization = base64.encode(authorizationOrigin);url = `${url}?authorization=${authorization}&date=${encodeURI(date)}&host=${host}`;resolve(url);});
}

消息处理：接收评测结果并解析

wsTask.onmessage = function(message) {let resJson = JSON.parse(message.data);if (resJson.data.status == 2) {let res = base64.decode(resJson.data.data)_this.iseContent = reswsTask.close();wsFlag = false}
}

4. 多题型支持

系统支持多种评测题型，通过watch监听题型变化并自动填充示例文本：

watch: {radio(newVal, oldVal) {let tempArray = newVal.split("+")this.ent = tempArray[0]this.category = tempArray[1]switch(newVal) {case "cn_vip+read_syllable":this.iseContent = "国"breakcase "cn_vip+read_word":this.iseContent = "中国"break// 其他题型处理...}}
}

支持的题型包括：