2025.10.30非遗声景漫游馆（项目架构文档）

非遗声景漫游馆 - 项目架构文档

项目概述

非遗声景漫游馆是一个融合「听觉 + 视觉 + 互动」的非遗文化沉浸体验网页项目，旨在通过现代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
维护者: 项目开发团队