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