xinli/语音读题功能优化说明.md

# 语音读题功能优化说明

## 问题修复

### 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. ✅ **交互优化** - 更好的视觉反馈和用户体验

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