# 语音读题功能优化说明 ## 问题修复 ### 1. 编译错误修复 ✅ **文件**: `ry-xinli-system/src/main/java/com/ddnai/system/service/impl/SysUserServiceImpl.java` **问题**: 缺少 `Map` 类的导入 **修复**: ```java import java.util.Map; ``` ## 功能优化 ### 2. 语音播放参数优化 ✅ **问题描述**: - 声音很小 - 朗读速度过慢 **优化方案**: #### 音量提升 ```javascript // 优化前 this.currentUtterance.volume = 1.0; // 已经是最大值 // 优化后 - 确保使用最大音量 this.currentUtterance.volume = 1.0; // 最大音量 ``` #### 语速优化 ```javascript // 优化前 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设计**: ``` 题目旁边两个按钮: ┌────────────┬────────────┐ │ 🎤 朗读全部 │ 🔊 朗读题干 │ └────────────┴────────────┘ ``` **按钮说明**: - **朗读全部** (绿色图标): 朗读题目 + 所有选项 - **朗读题干** (蓝色图标): 只朗读题目内容 **代码实现**: ```javascript /** 朗读当前题目和所有选项 */ 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交互优化 ✅ #### 播放状态指示 ```css /* 播放时的脉冲动画 */ .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; } } ``` #### 悬停效果 ```css .tts-btn-all:hover:not(:disabled), .tts-btn:hover:not(:disabled) { background-color: #f5f7fa; transform: scale(1.05); } ``` #### 禁用状态 ```css .tts-btn:disabled, .tts-btn-all:disabled { color: #c0c4cc; cursor: not-allowed; opacity: 0.5; } ``` ## 修改文件清单 ### 后端 1. `ry-xinli-system/src/main/java/com/ddnai/system/service/impl/SysUserServiceImpl.java` - 添加 `Map` 导入 ### 前端 - 量表测评 2. `xinli-ui/src/views/psychology/assessment/taking.vue` - 添加"朗读全部"按钮 - 优化语速参数(0.9 → 1.2) - 新增 `speakCurrentQuestion()` 方法 - 添加播放状态标识 `isSpeaking` - 优化样式布局 ### 前端 - 问卷答题 3. `xinli-ui/src/views/psychology/questionnaire/taking.vue` - 添加"朗读全部"按钮 - 优化语速参数(1.0 → 1.2) - 新增 `speakCurrentQuestion()` 方法 - 添加播放状态标识 `isSpeaking` - 优化样式布局 ## 功能特性 ### ✅ 音量优化 - 使用最大音量 (1.0) - 确保声音清晰可听 ### ✅ 语速优化 - 从 0.9/1.0 提升到 1.2 - 更自然流畅的阅读速度 - 避免拖沓感 ### ✅ 智能朗读 - **朗读全部**: 题目 + 所有选项(完整体验) - **朗读题干**: 只朗读题目(快速浏览) - **选项朗读**: 独立朗读每个选项(精准控制) ### ✅ 交互友好 - 播放时显示暂停图标 - 点击暂停按钮停止播放 - 悬停时按钮放大动画 - 播放时脉冲动画提示 ### ✅ 浏览器兼容 - 自动检测浏览器支持 - 优先选择中文语音引擎 - 不支持时禁用按钮 ## 使用说明 ### 量表测评/问卷答题 #### 方式1: 朗读全部 1. 点击题目旁的 **"🎤 朗读全部"** 按钮 2. 系统依次朗读:题目内容 → 选项A → 选项B → ... 3. 再次点击可停止播放 #### 方式2: 朗读题干 1. 点击题目旁的 **"🔊 朗读题干"** 按钮 2. 系统只朗读题目内容 3. 再次点击可停止播放 #### 方式3: 朗读单个选项 1. 点击选项旁边的 **🔊** 图标 2. 系统只朗读该选项内容 3. 适合需要反复听某个选项的场景 ## 技术说明 ### 语音引擎 使用浏览器内置的 **Web Speech API** ### 支持的浏览器 - Chrome 33+ - Edge 14+ - Safari 7+ - Firefox 49+ ### 语音参数 ```javascript { lang: 'zh-CN', // 中文 volume: 1.0, // 最大音量 rate: 1.2, // 语速稍快 pitch: 1.0 // 正常音调 } ``` ## 性能优化 ### 停止机制 - 切换题目时自动停止当前播放 - 点击播放按钮时先停止再播放 - 组件销毁时自动停止 ### 错误处理 - 浏览器不支持时禁用功能 - 播放失败时静默处理 - 已开始播放后忽略非致命错误 ## 未来优化方向 1. **语速调节**: 允许用户自定义语速(0.5-2.0) 2. **音量调节**: 添加音量滑块 3. **语音选择**: 支持多种语音引擎切换 4. **快捷键**: 支持键盘快捷键控制(如空格键播放/暂停) 5. **进度显示**: 显示当前朗读进度 6. **自动播放**: 支持切换题目时自动朗读 7. **离线语音**: 集成离线TTS引擎 ## 总结 本次优化主要解决了: 1. ✅ **编译错误** - 添加缺失的导入 2. ✅ **音量问题** - 确保使用最大音量 3. ✅ **语速问题** - 优化语速从慢速提升到正常偏快 4. ✅ **功能增强** - 新增"朗读全部"功能 5. ✅ **交互优化** - 更好的视觉反馈和用户体验 语音读题功能现在更加实用和流畅,用户可以根据需要选择不同的朗读方式!