xiaozhang/xinli

Fork 0

xiao12feng c6ced1cf64 2025年12月2日bug修复

2025-12-02 15:12:55 +08:00

6.2 KiB

Raw Blame History

语音读题功能优化说明

问题修复

1. 编译错误修复 ✅

文件: ry-xinli-system/src/main/java/com/ddnai/system/service/impl/SysUserServiceImpl.java

问题: 缺少 Map 类的导入

修复:

import java.util.Map;

功能优化

2. 语音播放参数优化 ✅

问题描述:

声音很小
朗读速度过慢

优化方案:

音量提升

// 优化前
this.currentUtterance.volume = 1.0; // 已经是最大值

// 优化后 - 确保使用最大音量
this.currentUtterance.volume = 1.0; // 最大音量

语速优化

// 优化前
this.currentUtterance.rate = 0.9; // 太慢

// 优化后
this.currentUtterance.rate = 1.2; // 正常语速，稍快

3. 新增"朗读全部"功能 ✅

功能描述: 点击后一次性朗读题目和所有选项

实现文件:

xinli-ui/src/views/psychology/assessment/taking.vue (量表测评)
xinli-ui/src/views/psychology/questionnaire/taking.vue (问卷答题)

UI设计:

题目旁边两个按钮：
┌────────────┬────────────┐
│ 🎤 朗读全部 │  🔊 朗读题干 │
└────────────┴────────────┘

按钮说明:

朗读全部 (绿色图标): 朗读题目 + 所有选项
朗读题干 (蓝色图标): 只朗读题目内容

代码实现:

/** 朗读当前题目和所有选项 */
speakCurrentQuestion() {
  if (!this.isTtsSupported || !this.currentItem) {
    this.$message.warning('浏览器不支持语音播放功能');
    return;
  }
  
  // 如果正在播放，则停止
  if (this.isSpeaking) {
    this.stopSpeaking();
    return;
  }
  
  // 构建完整文本：题目 + 所有选项
  let fullText = this.currentItem.itemContent.trim();
  
  if (this.currentOptions && this.currentOptions.length > 0) {
    fullText += '。选项：';
    this.currentOptions.forEach((option, index) => {
      const optionCode = option.optionCode || String.fromCharCode(65 + index);
      fullText += `${optionCode}、${option.optionContent}。`;
    });
  }
  
  // 调用朗读
  this.speakText(fullText);
}

4. 选项独立朗读按钮 ✅

功能: 每个选项旁边都有独立的朗读按钮

特点:

点击选项旁边的按钮，只朗读该选项内容
支持单选、多选、判断题等所有题型
播放时按钮显示暂停图标

5. UI交互优化 ✅

播放状态指示

/* 播放时的脉冲动画 */
.tts-btn-all.speaking, .tts-btn.speaking {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

悬停效果

.tts-btn-all:hover:not(:disabled), 
.tts-btn:hover:not(:disabled) {
  background-color: #f5f7fa;
  transform: scale(1.05);
}

禁用状态

.tts-btn:disabled, .tts-btn-all:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  opacity: 0.5;
}

修改文件清单

后端

ry-xinli-system/src/main/java/com/ddnai/system/service/impl/SysUserServiceImpl.java
- 添加 Map 导入

前端 - 量表测评

xinli-ui/src/views/psychology/assessment/taking.vue
- 添加"朗读全部"按钮
- 优化语速参数（0.9 → 1.2）
- 新增 speakCurrentQuestion() 方法
- 添加播放状态标识 isSpeaking
- 优化样式布局

前端 - 问卷答题

xinli-ui/src/views/psychology/questionnaire/taking.vue
- 添加"朗读全部"按钮
- 优化语速参数（1.0 → 1.2）
- 新增 speakCurrentQuestion() 方法
- 添加播放状态标识 isSpeaking
- 优化样式布局

功能特性

✅ 音量优化

使用最大音量 (1.0)
确保声音清晰可听

✅ 语速优化

从 0.9/1.0 提升到 1.2
更自然流畅的阅读速度
避免拖沓感

✅ 智能朗读

朗读全部: 题目 + 所有选项（完整体验）
朗读题干: 只朗读题目（快速浏览）
选项朗读: 独立朗读每个选项（精准控制）

✅ 交互友好

播放时显示暂停图标
点击暂停按钮停止播放
悬停时按钮放大动画
播放时脉冲动画提示

✅ 浏览器兼容

自动检测浏览器支持
优先选择中文语音引擎
不支持时禁用按钮

使用说明

量表测评/问卷答题

方式1: 朗读全部

点击题目旁的 "🎤 朗读全部" 按钮
系统依次朗读：题目内容 → 选项A → 选项B → ...
再次点击可停止播放

方式2: 朗读题干

点击题目旁的 "🔊 朗读题干" 按钮
系统只朗读题目内容
再次点击可停止播放

方式3: 朗读单个选项

点击选项旁边的 🔊 图标
系统只朗读该选项内容
适合需要反复听某个选项的场景

技术说明

语音引擎

使用浏览器内置的 Web Speech API

支持的浏览器

Chrome 33+
Edge 14+
Safari 7+
Firefox 49+

语音参数

{
  lang: 'zh-CN',        // 中文
  volume: 1.0,          // 最大音量
  rate: 1.2,            // 语速稍快
  pitch: 1.0            // 正常音调
}

性能优化

停止机制

切换题目时自动停止当前播放
点击播放按钮时先停止再播放
组件销毁时自动停止

错误处理

浏览器不支持时禁用功能
播放失败时静默处理
已开始播放后忽略非致命错误

未来优化方向

语速调节: 允许用户自定义语速（0.5-2.0）
音量调节: 添加音量滑块
语音选择: 支持多种语音引擎切换
快捷键: 支持键盘快捷键控制（如空格键播放/暂停）
进度显示: 显示当前朗读进度
自动播放: 支持切换题目时自动朗读
离线语音: 集成离线TTS引擎

总结

本次优化主要解决了：

✅ 编译错误 - 添加缺失的导入
✅ 音量问题 - 确保使用最大音量
✅ 语速问题 - 优化语速从慢速提升到正常偏快
✅ 功能增强 - 新增"朗读全部"功能
✅ 交互优化 - 更好的视觉反馈和用户体验

语音读题功能现在更加实用和流畅，用户可以根据需要选择不同的朗读方式！

6.2 KiB Raw Blame History Unescape Escape