🔔 编钟模拟器

核心定位

编钟模拟器不是传统意义上的"游戏"，而是一个文化体验型音乐应用。核心价值在于：

• 文化传承 - 让现代人以互动方式接触和理解编钟这一古老乐器
• 音乐创作 - 提供录制和分享功能，鼓励用户创作原创音乐
• 教育科普 - 展示一钟双音的物理原理和音乐理论知识

灵感来源

设计参考对象：曾侯乙编钟（战国早期，1978年湖北随县出土）

一钟双音系统

这是编钟模拟器最核心的设计特色，也是曾侯乙编钟最神奇的声学特性。

每口编钟的两个音高相差大三度（约4个半音），这一特性使得仅15口钟就能覆盖30个不同音高，极大地扩展了音域。

音区架构

编钟按大小分为三排，对应高中低三个音区：

总计：15口编钟 × 2音/钟 = 30个可用音高

音色合成原理

使用 Web Audio API 的振荡器节点合成编钟音色，包含三个层次：

音频配置表

音频路由图

专业模式（琶音器）

专业模式提供自动琶音功能，用户可以选择和弦级数，系统自动按节奏分解演奏。

调式：C大调，所有和弦根音从 C2 开始

经典曲目

内置曾侯乙编钟复原曲目，基于考古研究的音乐复原：

播放状态栏

在播放回放或经典曲目时，顶部显示播放状态栏：

• 显示当前播放的曲目名称
• 【退出】按钮可立即停止播放
• 播放图标带动画效果

设计原则

• 沉浸优先 - 深色背景减少视觉干扰，突出金色编钟
• 横屏体验 - 强制横屏模式，模拟真实编钟的宽展布局
• 直观操作 - 无需教程，点击/触控即可发声
• 即时反馈 - 每次敲击都有视觉和听觉双重反馈

界面布局

实际界面截图

@keyframes swingStrong {
    0%  { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-8deg) scale(1.02); }
    40% { transform: rotate(6deg) scale(1.02); }
    60% { transform: rotate(-4deg) scale(1.01); }
    80% { transform: rotate(2deg) scale(1); }
    100%{ transform: rotate(0deg) scale(1); }
}
持续时间：0.6s
缓动函数：cubic-bezier(0.36, 0, 0.66, -0.56)

@keyframes bellGlow {
    0%   { filter: brightness(1) drop-shadow(0 0 0 rgba(255,215,0,0)); }
    30%  { filter: brightness(1.5) drop-shadow(0 0 20px rgba(255,215,0,0.8)); }
    60%  { filter: brightness(1.3) drop-shadow(0 0 15px rgba(255,215,0,0.5)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255,215,0,0)); }
}
持续时间：0.6s
缓动函数：ease-out

伪元素 ::after 实现
边框：2px solid rgba(255, 215, 0, 0.8)
动画：从 100%×100% 扩散到 200%×200%
透明度：1 → 0
持续时间：0.6s

@keyframes hit {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
持续时间：0.2s
位置：钟体上方 -20px

色彩系统

视觉反馈系统

敲击检测机制

编钟采用点击位置判断来确定正敲或侧敲：

┌─────────────────────────┐
│       编钟钟体           │
│   ◄─────┼─────►         │
│   侧敲  │  正敲          │
│ (左侧)  │ (右侧)         │
│   E4    │   C4           │
│  高音   │  低音          │
└─────────────────────────┘

判定逻辑：
if (点击位置.x < 钟体宽度 / 2) → 侧敲 (侧鼓音)
else → 正敲 (正鼓音)

悬停提示：鼠标/手指悬停时显示"正"和"侧"字样，帮助用户理解交互方式。

手势支持

注意：为防止误触，-webkit-tap-highlight-color 设置为透明，消除移动端点击高亮。

屏幕方向处理

数据结构设计

{
    id: 1709999999999,           // 时间戳作为唯一ID
    name: "演奏 1",              // 用户可编辑名称
    date: "2026/3/11 10:30:00",  // 录制日期时间
    duration: "45.2",            // 演奏时长（秒）
    notes: [                     // 音符数组
        {
            note: "C4",          // 音名
            freq: 261.63,        // 频率
            isSide: false,       // 是否侧敲
            time: 0              // 相对开始的时间戳(ms)
        },
        {
            note: "E4",
            freq: 329.63,
            isSide: true,
            time: 850
        },
        // ...
    ]
}

录制流程

回放机制

回放使用 setTimeout 按照录制时的时间戳精确触发每个音符：

recording.notes.forEach((noteData) => {
    setTimeout(() => {
        playBellSound(noteData.freq);
    }, noteData.time);
});

特点：

• 非音频文件录制，数据体积极小
• 可精确还原演奏时机
• 支持任意速度回放（可扩展变速功能）

分享功能

存储方案

技术栈

浏览器兼容性

音频自动播放策略

现代浏览器对自动播放有严格限制，采用以下策略处理：

function initAudio() {
    if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        masterGain = audioContext.createGain();
        masterGain.gain.value = 0.8;
        masterGain.connect(audioContext.destination);
    }
    // 处理暂停状态（iOS Safari 需要）
    if (audioContext.state === 'suspended') {
        audioContext.resume();
    }
}

// 在用户首次点击/触摸时初始化
bell.addEventListener('click', () => {
    initAudio();  // 确保音频上下文已激活
    playBellSound(freq);
});

已实现功能 已完成

• 核心 一钟双音系统（正敲/侧敲）
• 核心 三排15口编钟音阶布局
• 核心 Web Audio API 音色合成
• UI 响应式横屏布局
• UI 强化动画效果（摇摆+发光+涟漪）
• UI 播放状态栏与退出功能
• 技术 录制与回放系统
• 技术 LocalStorage 持久化存储
• 技术 分享链接生成
• 技术 分享卡片生成（Canvas）
• 技术 数据导出为 JSON
• 专业 琶音器模式（1513结构）
• 专业 经典曲目（曾侯乙复原）

未来可扩展功能

参考资源

• 曾侯乙编钟 - 湖北省博物馆
• Web Audio API 规范 - W3C
• 《中国古代音乐史稿》杨荫浏

相关链接

• 编钟模拟器演示 - 在线体验
• 能力图谱主页 - 更多项目