2025.10.31非遗声景漫游馆（技术实现文档）

非遗声景漫游馆 - 技术实现文档

核心技术实现

1. 前端技术实现

1.1 HTML5结构设计

语义化布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非遗声景漫游馆</title>
</head>
<body>
    <!-- 加载动画 -->
    <div id="loadingScreen" class="loading-screen">
        <div class="title-animation">非遗声景漫游馆</div>
    </div>
    
    <!-- 主容器 -->
    <div id="mainContainer" class="main-container">
        <!-- 导航栏 -->
        <header class="header">
            <nav class="nav">
                <!-- 导航菜单 -->
            </nav>
        </header>
        
        <!-- 内容区域 -->
        <main class="content">
            <!-- 各功能模块 -->
        </main>
    </div>
</body>
</html>

1.2 CSS3动画与响应式

关键动画实现

/* 毛笔书写动画 */
@keyframes brushWrite {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-5deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* 皮影动画 */
.puppet-wave {
    animation: puppetWave 1s ease-in-out;
}

@keyframes puppetWave {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}

响应式设计

@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

1.3 JavaScript交互逻辑

页面管理核心代码

// 页面切换功能
function showSection(sectionId) {
    // 隐藏所有页面
    const sections = document.querySelectorAll('.section');
    sections.forEach(section => {
        section.classList.remove('active');
    });
    
    // 显示目标页面
    const targetSection = document.getElementById(sectionId);
    if (targetSection) {
        targetSection.classList.add('active');
        
        // 特定页面初始化
        switch(sectionId) {
            case 'shadow-puppet':
                initPuppetAnimation();
                break;
            case 'woodwork':
                showCraftmanSaying();
                break;
        }
    }
}

2. 音频技术实现

2.1 Web Audio API应用

音频生成器类

class KunquAudioGenerator {
    constructor() {
        this.audioContext = null;
        this.isPlaying = false;
        this.currentOscillator = null;
    }
    
    // 生成昆曲音调
    playKunquTone(duration = 1000, frequency = 440) {
        this.init();
        
        // 使用传统五声音阶
        const pentatonicScale = {
            'do': 261.63, 're': 293.66, 'mi': 329.63,
            'sol': 392.00, 'la': 440.00
        };
        
        this.currentOscillator.frequency.value = frequency;
        this.currentOscillator.type = 'sine';
    }
}

2.2 HTML5音频控制

背景音乐管理

let backgroundMusic = null;

function toggleBackgroundMusic() {
    if (!backgroundMusic) {
        backgroundMusic = new Audio('audio/silence.mp3');
        backgroundMusic.loop = true;
    }
    
    if (backgroundMusic.paused) {
        backgroundMusic.play();
    } else {
        backgroundMusic.pause();
    }
}

3. 交互功能实现

3.1 皮影戏模块

皮影动作控制

function puppetAction(action) {
    const puppet = document.querySelector('.puppet-body');
    
    // 移除所有动画类
    puppet.classList.remove('puppet-wave', 'puppet-turn', 'puppet-bow');
    
    switch(action) {
        case 'wave':
            puppet.classList.add('puppet-wave');
            break;
        case 'turn':
            puppet.classList.add('puppet-turn');
            break;
        case 'bow':
            puppet.classList.add('puppet-bow');
            break;
    }
}

3.2 榫卯拼图模块

拖拽功能实现

function initDragAndDrop() {
    const draggableElements = document.querySelectorAll('.draggable');
    
    draggableElements.forEach(element => {
        element.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('text/plain', e.target.id);
        });
    });
    
    const dropZones = document.querySelectorAll('.drop-zone');
    dropZones.forEach(zone => {
        zone.addEventListener('dragover', (e) => {
            e.preventDefault();
        });
        
        zone.addEventListener('drop', (e) => {
            e.preventDefault();
            const data = e.dataTransfer.getData('text/plain');
            const draggedElement = document.getElementById(data);
            e.target.appendChild(draggedElement);
        });
    });
}

4. 服务器技术实现

4.1 Node.js静态服务器

核心服务器代码

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
    // CORS配置
    res.setHeader('Access-Control-Allow-Origin', '*');
    
    // 文件路径处理
    let filePath = '.' + req.url;
    if (filePath === './') {
        filePath = './index.html';
    }
    
    // MIME类型映射
    const mimeTypes = {
        '.html': 'text/html',
        '.js': 'text/javascript',
        '.css': 'text/css',
        '.mp3': 'audio/mpeg'
    };
    
    const extname = String(path.extname(filePath)).toLowerCase();
    const contentType = mimeTypes[extname] || 'application/octet-stream';
    
    // 文件读取和响应
    fs.readFile(filePath, (error, content) => {
        if (error) {
            res.writeHead(404);
            res.end('404 Not Found');
        } else {
            res.writeHead(200, { 'Content-Type': contentType });
            res.end(content, 'utf-8');
        }
    });
});

server.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

5. 性能优化技术

5.1 加载优化

资源预加载策略

// 关键资源预加载
function preloadCriticalResources() {
    const criticalResources = [
        'audio/silence.mp3',
        'audio/mudanting.mp3'
    ];
    
    criticalResources.forEach(resource => {
        const link = document.createElement('link');
        link.rel = 'preload';
        link.href = resource;
        link.as = resource.endsWith('.mp3') ? 'audio' : 'script';
        document.head.appendChild(link);
    });
}

5.2 动画优化

硬件加速动画

.puppet-character {
    transform: translateZ(0); /* 触发硬件加速 */
    will-change: transform;
}

.animate-fast {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

6. 错误处理机制

6.1 前端错误处理

健壮的错误处理

document.addEventListener('DOMContentLoaded', function() {
    try {
        // 页面初始化逻辑
        setTimeout(() => {
            const loadingScreen = document.getElementById('loadingScreen');
            if (loadingScreen) {
                loadingScreen.style.opacity = '0';
            }
        }, 3000);
    } catch (error) {
        console.error('页面初始化错误:', error);
        // 优雅降级处理
        showErrorPage();
    }
});

function showErrorPage() {
    const mainContainer = document.getElementById('mainContainer');
    if (mainContainer) {
        mainContainer.innerHTML = `
            <div style="text-align: center; padding: 50px;">
                <h2>页面加载失败</h2>
                <p>请刷新页面重试</p>
            </div>
        `;
        mainContainer.style.display = 'block';
    }
}

6.2 音频错误处理

音频兼容性处理

function safePlayAudio(audioElement) {
    audioElement.play().catch(error => {
        console.warn('音频播放被阻止:', error);
        // 显示播放按钮让用户手动触发
        showAudioPlayButton();
    });
}

7. 兼容性处理

7.1 浏览器兼容性

特性检测和降级

// 检测Web Audio API支持
if (window.AudioContext || window.webkitAudioContext) {
    // 使用Web Audio API
    initAdvancedAudio();
} else {
    // 降级到HTML5 Audio
    initBasicAudio();
}

// 检测拖放API支持
if ('draggable' in document.createElement('div')) {
    initDragAndDrop();
} else {
    // 使用点击选择替代拖放
    initClickSelection();
}

技术亮点

  1. 多感官融合: 结合视觉、听觉、触觉的多维度体验
  2. 响应式设计: 适配多种设备屏幕尺寸
  3. 性能优化: 懒加载、硬件加速、资源优化
  4. 错误恢复: 完善的错误处理和降级方案
  5. 模块化架构: 清晰的代码组织和功能分离

文档版本: 1.0
最后更新: 2025-12-28
维护者: 项目开发团队

posted @ 2025-12-28 23:56  ysd666  阅读(2)  评论(0)    收藏  举报