165 lines
4.4 KiB
Markdown
165 lines
4.4 KiB
Markdown
|
# AI讲故事功能使用指南
|
|||
|
|
|
|||
|
|
## 功能介绍
|
|||
|
|
|
|||
|
|
AI讲故事是一个智能童话阅读系统，为孩子提供个性化的故事阅读体验。系统具有以下特点：
|
|||
|
|
|
|||
|
|
### 🌟 核心功能
|
|||
|
|
- **智能故事库**：包含多个分类的精选故事
|
|||
|
|
- **AI语音朗读**：虚拟猫头鹰老师自然语音讲解
|
|||
|
|
- **交互式阅读**：支持逐段阅读和进度控制
|
|||
|
|
- **语音控制**：支持语音开关和播放控制
|
|||
|
|
- **响应式设计**：适配各种设备尺寸
|
|||
|
|
|
|||
|
|
## 文件结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
├── html/
|
|||
|
|
│ └── ai_storytelling.html # 主页面文件
|
|||
|
|
├── css/
|
|||
|
|
│ └── ai_storytelling.css # 专用样式文件
|
|||
|
|
├── js/
|
|||
|
|
│ └── aiStorytelling.js # 主要功能逻辑
|
|||
|
|
└── data/
|
|||
|
|
└── storyBank.json # 故事数据库
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 启动系统
|
|||
|
|
```bash
|
|||
|
|
# 进入项目目录
|
|||
|
|
cd rg-09112127
|
|||
|
|
|
|||
|
|
# 启动本地服务器
|
|||
|
|
python -m http.server 8000
|
|||
|
|
|
|||
|
|
# 在浏览器中打开
|
|||
|
|
http://localhost:8000/html/ai_storytelling.html
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 功能操作
|
|||
|
|
|
|||
|
|
#### 📚 选择故事
|
|||
|
|
- **分类筛选**：使用顶部的筛选按钮按故事类型浏览
|
|||
|
|
- **查看详情**：点击"详情"按钮查看故事信息
|
|||
|
|
- **开始阅读**：点击"开始阅读"进入阅读界面
|
|||
|
|
|
|||
|
|
#### 🎭 阅读体验
|
|||
|
|
- **段落导航**：使用"上一段"/"下一段"按钮控制进度
|
|||
|
|
- **AI朗读**：点击"朗读本段"听虚拟老师讲故事
|
|||
|
|
- **语音控制**：右下角的语音控制按钮
|
|||
|
|
- 🔇 开启/关闭语音
|
|||
|
|
- ⏯️ 播放/暂停
|
|||
|
|
- ⏹️ 停止播放
|
|||
|
|
|
|||
|
|
#### ⌨️ 快捷键支持
|
|||
|
|
- `ESC`：关闭阅读器
|
|||
|
|
- `←`/`→`：上一段/下一段
|
|||
|
|
- `空格`：朗读当前段落
|
|||
|
|
|
|||
|
|
### 3. 故事数据结构
|
|||
|
|
|
|||
|
|
每个故事包含以下信息：
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"id": "story_xxx", // 故事唯一标识
|
|||
|
|
"title": "故事标题", // 显示标题
|
|||
|
|
"category": "故事分类", // 用于筛选
|
|||
|
|
"difficulty": 3, // 难度等级(1-5)
|
|||
|
|
"cover": "封面图片路径", // 故事封面
|
|||
|
|
"description": "故事简介", // 简短描述
|
|||
|
|
"timeEstimate": "预计时长", // 阅读时间
|
|||
|
|
"ageRange": "适合年龄", // 推荐年龄
|
|||
|
|
"content": { // 故事内容
|
|||
|
|
"beginning": {...}, // 开头部分
|
|||
|
|
"middle": {...}, // 中间部分
|
|||
|
|
"ending": {...} // 结尾部分
|
|||
|
|
},
|
|||
|
|
"questions": [...] // 故事相关问题
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 技术特色
|
|||
|
|
|
|||
|
|
### 🧠 AI集成
|
|||
|
|
- **虚拟猫头鹰老师**：使用`virtualTeacher.js`提供语音互动
|
|||
|
|
- **语音合成**：集成讯飞语音API进行自然语音朗读
|
|||
|
|
- **智能交互**：根据用户行为调整讲解方式
|
|||
|
|
|
|||
|
|
### 🎨 用户体验
|
|||
|
|
- **动画效果**：使用Animate.css提供流畅动画
|
|||
|
|
- **响应式布局**：支持桌面和移动设备
|
|||
|
|
- **无障碍支持**：集成语音播报功能
|
|||
|
|
|
|||
|
|
### 📱 适配特性
|
|||
|
|
- **渐进加载**：分步加载内容，提升用户体验
|
|||
|
|
- **错误处理**：优雅的错误处理和用户反馈
|
|||
|
|
- **性能优化**：图片懒加载和缓存机制
|
|||
|
|
|
|||
|
|
## 自定义扩展
|
|||
|
|
|
|||
|
|
### 添加新故事
|
|||
|
|
1. 编辑`data/storyBank.json`文件
|
|||
|
|
2. 添加新的故事对象到`stories`数组
|
|||
|
|
3. 确保故事数据结构完整
|
|||
|
|
4. 添加对应的图片资源到`asset`目录
|
|||
|
|
|
|||
|
|
### 修改语音设置
|
|||
|
|
- 在`js/aiStorytelling.js`中调整语音参数：
|
|||
|
|
```javascript
|
|||
|
|
window.virtualTeacher.speak(text, {
|
|||
|
|
rate: 0.8, // 语速(0.1-10)
|
|||
|
|
pitch: 1.1, // 音调(0-2)
|
|||
|
|
volume: 0.8 // 音量(0-1)
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 样式自定义
|
|||
|
|
- 编辑`css/ai_storytelling.css`调整外观
|
|||
|
|
- 主要样式变量：
|
|||
|
|
- 主背景色：`#667eea`到`#764ba2`渐变色
|
|||
|
|
- 按钮色彩：蓝色系(`#667eea`)
|
|||
|
|
- 卡片样式：圆角20px，半透明背景
|
|||
|
|
|
|||
|
|
## 故障排除
|
|||
|
|
|
|||
|
|
### 常见问题
|
|||
|
|
1. **音频播放失败**
|
|||
|
|
- 检查网络连接
|
|||
|
|
- 确认语音API密钥配置
|
|||
|
|
- 检查浏览器音频权限
|
|||
|
|
|
|||
|
|
2. **图片加载失败**
|
|||
|
|
- 确认图片路径正确
|
|||
|
|
- 检查文件权限
|
|||
|
|
- 查看控制台错误信息
|
|||
|
|
|
|||
|
|
3. **动画卡顿**
|
|||
|
|
- 降低动画复杂度
|
|||
|
|
- 检查设备性能
|
|||
|
|
- 考虑禁用某些效果
|
|||
|
|
|
|||
|
|
### 调试模式
|
|||
|
|
在浏览器控制台中启用详细日志：
|
|||
|
|
```javascript
|
|||
|
|
console.log('激活AI讲故事调试模式');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 更新日志
|
|||
|
|
|
|||
|
|
### v1.0.0 (2024-01-XX)
|
|||
|
|
- ✅ 完成基础功能开发
|
|||
|
|
- ✅ 集成虚拟猫头鹰老师
|
|||
|
|
- ✅ 添加语音控制功能
|
|||
|
|
- ✅ 实现响应式设计
|
|||
|
|
- ✅ 提供5个示例故事
|
|||
|
|
|
|||
|
|
## 技术支持
|
|||
|
|
|
|||
|
|
如需技术支持或功能建议，请联系开发团队。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**享受AI讲故事的美好时光！** 🎉📚✨
|