非遗声景漫游馆 - 项目架构文档
项目概述
非遗声景漫游馆是一个融合「听觉 + 视觉 + 互动」的非遗文化沉浸体验网页项目，旨在通过现代Web技术展示和传播中国非物质文化遗产。
系统架构
整体架构图
非遗声景漫游馆
├── 前端层 (Frontend)
│ ├── 用户界面 (HTML/CSS/JavaScript)
│ ├── 交互逻辑
│ └── 多媒体控制
├── 服务层 (Server)
│ └── Node.js静态文件服务器
└── 资源层 (Resources)├── 音频文件├── 样式资源└── 图标资源
技术栈架构
前端技术栈
- HTML5: 语义化页面结构，支持多媒体元素
- CSS3: 响应式设计、动画效果、传统美学风格
- JavaScript: 交互逻辑、动态内容、音频控制
- Web Audio API: 音频处理和生成
后端技术栈
- Node.js: 轻量级HTTP服务器
- HTTP模块: 静态文件服务
- 文件系统模块: 资源文件管理
目录结构
flash源代码/
├── 前端文件
│ ├── index.html # 主页面文件
│ ├── styles.css # 样式文件
│ ├── script.js # 主要JavaScript逻辑
│ └── favicon.svg # 网站图标
├── 音频模块
│ ├── audio/ # 音频资源目录
│ ├── audio-generator.js # 音频生成器
│ ├── check_audio.js # 音频文件检查
│ └── mudanting.mp3 # 昆曲音频文件
├── 服务器文件
│ └── server.js # Node.js服务器
└── 文档文件├── README.md # 项目说明└── 项目说明.md # 详细项目报告
模块架构
1. 核心模块
1.1 页面管理模块
- 功能: 页面切换、导航控制、加载动画
- 文件: script.js (showSection函数)
- 技术: DOM操作、CSS动画
1.2 音频管理模块
- 功能: 背景音乐控制、音频播放、音效生成
- 文件: script.js、audio-generator.js
- 技术: Web Audio API、HTML5 Audio
2. 功能模块
2.1 皮影戏模块
- 组件: 皮影人物、控制面板、故事编辑器
- 交互: 动作控制、故事播放、剧本创作
- 动画: CSS关键帧动画
2.2 榫卯工艺模块
- 组件: 拼图界面、匠人口诀、成就系统
- 交互: 拖拽操作、拼图验证、口诀学习
- 技术: HTML5拖放API
2.3 油纸伞模块
- 组件: 制作流程、工艺介绍、步骤展示
- 交互: 步骤切换、动画播放、工艺学习
- 动画: CSS过渡动画
2.4 昆曲模块
- 组件: 唱词显示、声景体验、选段切换
- 交互: 音频播放、唱词同步、声景联动
- 技术: 音频同步、文本动画
2.5 互动创作模块
- 组件: 创作工具、游戏界面、保存功能
- 交互: 创作操作、游戏逻辑、数据存储
- 技术: 本地存储、表单处理
2.6 分享社区模块
- 组件: 作品展示、社区画廊、互动系统
- 交互: 作品上传、点赞评论、社区浏览
- 技术: 模拟数据、UI交互
数据流架构
前端数据流
用户操作 → 事件监听 → 状态更新 → UI渲染 → 用户反馈
音频数据流
音频文件/生成器 → AudioContext → 音频处理 → 扬声器输出
页面状态流
页面切换 → 模块初始化 → 交互响应 → 状态保存 → 页面切换
性能架构
加载优化
- 懒加载: 模块按需加载
- 资源优化: 音频文件压缩
- 缓存策略: 浏览器缓存利用
渲染优化
- CSS优化: 硬件加速动画
- DOM优化: 最小化重绘重排
- 内存管理: 及时清理事件监听器
音频优化
- 预加载: 关键音频预加载
- 缓冲管理: 音频缓冲策略
- 性能监控: 音频上下文状态监控
安全架构
前端安全
- 输入验证: 用户输入验证
- XSS防护: 内容安全策略
- 资源保护: 静态资源访问控制
服务器安全
- CORS配置: 跨域资源共享
- 文件访问: 路径遍历防护
- 错误处理: 安全错误信息
扩展性设计
模块化设计
- 松耦合: 模块间低依赖
- 高内聚: 功能集中管理
- 接口标准化: 统一交互接口
配置化设计
- 参数配置: 可配置参数
- 主题定制: 样式主题化
- 内容管理: 动态内容加载
部署架构
开发环境
- 本地服务器: Node.js开发服务器
- 热重载: 文件变更自动刷新
- 调试工具: 浏览器开发者工具
生产环境
- 静态托管: 静态文件托管服务
- CDN加速: 内容分发网络
- 监控分析: 用户行为分析
文档版本: 1.0
最后更新: 2025-12-28
维护者: 项目开发团队