欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
颜色听觉化是一款独特的感官转换应用，核心理念是"把颜色转换成音乐"。这款应用打破了视觉与听觉的感官边界，让用户能够"听见"颜色的声音。通过科学的颜色-音乐映射算法，将颜色的色相、饱和度、亮度三个维度分别转换为音乐的音高、音量和八度，创造出独特的视听联觉体验。
联觉是一种神经现象，指一种感官刺激引发另一种感官的感受。本应用模拟了这种神奇的感知能力，让普通用户也能体验"听见颜色"的奇妙感受。无论是艺术家寻找灵感、音乐人探索新声音，还是普通用户感受新奇体验，都能在这款应用中找到乐趣。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 颜色选择 | 通过滑块选择颜色 | HSL颜色模型 |
| 颜色预览 | 实时显示选中颜色 | 动态渐变容器 |
| 音乐映射 | 将颜色转换为音乐参数 | 映射算法 |
| 音乐播放 | 播放对应音符 | 模拟播放动画 |
| 颜色保存 | 保存喜欢的颜色音乐 | 列表存储 |
| 信息展示 | 显示音符、八度、频率 | 数据可视化 |
1.3 颜色-音乐映射规则
| 颜色属性 | 音乐属性 | 映射规则 |
|---|---|---|
| 色相(Hue) | 音高(音符) | 0-360°映射到Do-Si七个音符 |
| 饱和度(Saturation) | 音量 | 0-100%映射到音量大小 |
| 亮度(Lightness) | 八度 | 低/中/高三个八度 |
1.4 音符映射表
| 序号 | 音符 | 名称 | 频率(Hz) | 色相范围 | 代表颜色 |
|---|---|---|---|---|---|
| 1 | C | Do | 261.63 | 0-25° | 红色 |
| 2 | D | Re | 293.66 | 25-50° | 橙色 |
| 3 | E | Mi | 329.63 | 50-75° | 黄色 |
| 4 | F | Fa | 349.23 | 75-150° | 绿色 |
| 5 | G | Sol | 392.00 | 150-200° | 青色 |
| 6 | A | La | 440.00 | 200-280° | 蓝色 |
| 7 | B | Si | 493.88 | 280-360° | 紫色 |
1.5 八度映射表
| 序号 | 八度 | 亮度范围 | 频率倍数 | 描述 |
|---|---|---|---|---|
| 1 | 低音 | 0-33% | 0.5x | 深沉、厚重 |
| 2 | 中音 | 33-66% | 1.0x | 标准、自然 |
| 3 | 高音 | 66-100% | 2.0x | 明亮、清脆 |
1.6 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 动画控制 | AnimationController | - |
| 颜色模型 | HSL | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
二、项目结构
lib/
├── main_color_to_sound.dart # 应用主入口
│ ├── ColorToSoundApp # 根应用组件
│ ├── MusicalNote # 音符枚举
│ ├── Octave # 八度枚举
│ ├── ColorMusic # 颜色音乐模型
│ └── ColorToSoundHomePage # 主页面三、数据模型
3.1 MusicalNote 枚举
dart
enum MusicalNote {
c('Do', 'C', 261.63, Color(0xFFFF0000)),
d('Re', 'D', 293.66, Color(0xFFFF8000)),
e('Mi', 'E', 329.63, Color(0xFFFFFF00)),
f('Fa', 'F', 349.23, Color(0xFF00FF00)),
g('Sol', 'G', 392.00, Color(0xFF00FFFF)),
a('La', 'A', 440.00, Color(0xFF0000FF)),
b('Si', 'B', 493.88, Color(0xFF8000FF));
final String name;
final String symbol;
final double frequency;
final Color color;
static MusicalNote fromHue(double hue) {
if (hue < 25) return MusicalNote.c;
if (hue < 50) return MusicalNote.d;
if (hue < 75) return MusicalNote.e;
if (hue < 150) return MusicalNote.f;
if (hue < 200) return MusicalNote.g;
if (hue < 280) return MusicalNote.a;
return MusicalNote.b;
}
}3.2 Octave 枚举
dart
enum Octave {
low('低音', 0.5, Color(0xFF4A148C)),
medium('中音', 1.0, Color(0xFF7B1FA2)),
high('高音', 2.0, Color(0xFFE1BEE7));
final String label;
final double multiplier;
final Color color;
static Octave fromLightness(double lightness) {
if (lightness < 0.33) return Octave.low;
if (lightness < 0.66) return Octave.medium;
return Octave.high;
}
}3.3 ColorMusic 模型
dart
class ColorMusic {
final String id; // 唯一标识
final Color color; // 颜色值
final MusicalNote note; // 对应音符
final Octave octave; // 八度
final double volume; // 音量
final DateTime createdAt; // 创建时间
final String? name; // 自定义名称
double get frequency => note.frequency * octave.multiplier;
String get description => '${note.name}(${octave.label})';
}四、核心功能实现
4.1 颜色-音乐映射流程
0-25°
25-50°
50-75°
75-150°
150-200°
200-280°
280-360°
0-33%
33-66%
66-100%
用户选择颜色
提取HSL值
色相判断
音符Do
音符Re
音符Mi
音符Fa
音符Sol
音符La
音符Si
亮度判断
低八度
中八度
高八度
计算频率
播放音乐
4.2 HSL颜色转换
dart
void _updateSelectedColor() {
_selectedColor = HSLColor.fromAHSL(1, _hue, _saturation, _lightness).toColor();
}4.3 音符频率计算
音符频率基于国际标准音高：
f f i n a l = f b a s e × m u l t i p l i e r o c t a v e f_{final} = f_{base} \times multiplier_{octave} ffinal=fbase×multiplieroctave
其中：
- f b a s e f_{base} fbase 是基础音符频率（如A=440Hz）
- m u l t i p l i e r o c t a v e multiplier_{octave} multiplieroctave 是八度倍数（低音0.5，中音1.0，高音2.0）
dart
double get frequency => note.frequency * octave.multiplier;4.4 颜色选择器实现
dart
Widget _buildHueSlider() {
return Container(
height: 40,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [
Color(0xFFFF0000), // 红
Color(0xFFFFFF00), // 黄
Color(0xFF00FF00), // 绿
Color(0xFF00FFFF), // 青
Color(0xFF0000FF), // 蓝
Color(0xFF8000FF), // 紫
Color(0xFFFF0000), // 红
],
),
borderRadius: BorderRadius.circular(20),
),
child: Slider(
value: _hue,
min: 0,
max: 360,
onChanged: (value) {
setState(() {
_hue = value;
_updateSelectedColor();
});
},
),
);
}4.5 播放动画实现
动画控制器 应用 用户 动画控制器 应用 用户 点击播放按钮 启动播放动画 更新_isPlaying状态 显示播放提示 循环动画2秒 动画完成 重置播放状态 显示停止提示
五、界面设计
5.1 主页面布局
┌─────────────────────────────────────┐
│ 🎵 颜色听觉化 │
│ 把颜色转换成音乐 │
├─────────────────────────────────────┤
│ │
│ ┌───────────┐ │
│ │ C │ │
│ │ 中音 │ │
│ └───────────┘ │
│ 颜色预览圆 │
│ │
├─────────────────────────────────────┤
│ 色相 (音高) 270° │
│ [彩虹渐变滑块] │
│ Do Re Mi Fa Sol La Si │
│ │
│ 饱和度 (音量) 70% │
│ [灰→彩色渐变滑块] │
│ │
│ 亮度 (八度) 50% │
│ [黑→彩色→白渐变滑块] │
│ 低音 中音 高音 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 音符 八度 音量 │ │
│ │ La 中音 70% │ │
│ │ 🎵 频率: 440.0 Hz │ │
│ └─────────────────────────────┘ │
│ │
│ [▶ 播放] │
├─────────────────────────────────────┤
│ 保存的颜色 3个 │
│ ┌─────┐┌─────┐┌─────┐ │
│ │ 🔴 ││ 🔵 ││ 🟢 │ │
│ │夕阳红││天空蓝││森林绿│ │
│ │ 中音 ││ 高音 ││ 低音 │ │
│ └─────┘└─────┘└─────┘ │
│ │
│ [保存颜色] │
└─────────────────────────────────────┘5.2 颜色预览组件
┌─────────────────────────────────────┐
│ │
│ ┌─────────┐ │
│ ╱ 渐变 ╲ │
│ │ 圆形 │ │
│ │ ┌───┐ │ │
│ │ │ C │ │ │
│ │ │中音│ │ │
│ │ └───┘ │ │
│ ╲ 阴影效果 ╱ │
│ └─────────┘ │
│ │
│ 播放时产生脉冲效果 │
│ │
└─────────────────────────────────────┘5.3 保存颜色弹窗
┌─────────────────────────────────────┐
│ 命名颜色 │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 输入颜色名称 │ │
│ └─────────────────────────────┘ │
│ │
│ [取消] [保存] │
└─────────────────────────────────────┘六、动画效果
6.1 波纹动画
dart
_waveController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1500),
)..repeat();
AnimatedBuilder(
animation: _waveController,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 30 + (_isPlaying ? _waveController.value * 20 : 0),
spreadRadius: _isPlaying ? 5 + _waveController.value * 10 : 5,
),
],
),
);
},
)6.2 脉冲动画
dart
_pulseController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000),
)..repeat(reverse: true);
AnimatedBuilder(
animation: _pulseController,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: _selectedColor.withValues(
alpha: 0.4 + _pulseController.value * 0.2
),
blurRadius: 10 + _pulseController.value * 5,
),
],
),
);
},
)七、运行与调试
7.1 运行命令
bash
# 运行到鸿蒙设备
flutter run -d harmony lib/main_color_to_sound.dart
# 运行到Web服务器
flutter run -d web-server -t lib/main_color_to_sound.dart --web-port 8127
# 运行到Windows
flutter run -d windows -t lib/main_color_to_sound.dart
# 代码分析
flutter analyze lib/main_color_to_sound.dart7.2 功能测试清单
| 测试项 | 测试内容 | 预期结果 |
|---|---|---|
| 颜色选择 | 滑动色相滑块 | 颜色正确变化 |
| 音符映射 | 检查音符对应 | 音符正确显示 |
| 八度映射 | 调整亮度滑块 | 八度正确切换 |
| 音量映射 | 调整饱和度滑块 | 音量正确计算 |
| 播放功能 | 点击播放按钮 | 动画正确播放 |
| 保存功能 | 保存当前颜色 | 颜色成功保存 |
八、扩展方向
8.1 后端集成
┌─────────────┐ HTTPS ┌─────────────┐
│ 客户端 │ ←─────────────→ │ 服务器 │
└─────────────┘ └─────────────┘
│ │
│ 颜色音乐数据同步 │
│ 用户认证 │
│ 真实音频生成 │
│ 作品分享 │
↓ ↓
┌─────────────┐ ┌─────────────┐
│ 本地存储 │ │ 云端数据库 │
└─────────────┘ └─────────────┘8.2 功能扩展计划
| 版本 | 功能 | 描述 |
|---|---|---|
| v1.1 | 真实音频 | 使用音频库播放真实音符 |
| v1.2 | 颜色提取 | 从图片中提取主色调 |
| v1.3 | 音乐序列 | 创建颜色音乐序列 |
| v1.4 | 作品分享 | 分享颜色音乐作品 |
| v1.5 | 社区画廊 | 浏览他人作品 |
8.3 高级功能
颜色听觉化
音频功能
图像功能
社交功能
真实音频播放
音乐序列生成
导出音频文件
图片颜色提取
实时摄像头
颜色识别
作品分享
社区画廊
协作创作
九、使用场景
9.1 典型使用场景
🎵 颜色听觉化使用场景 🎵
| 场景 | 描述 | 适用人群 |
|---|---|---|
| 艺术创作 | 将颜色灵感转化为音乐 | 艺术家、设计师 |
| 音乐探索 | 探索新的声音组合 | 音乐人、作曲家 |
| 教育体验 | 理解颜色与声音的关系 | 学生、教育者 |
| 感官体验 | 体验联觉的奇妙感受 | 普通用户 |
| 冥想放松 | 通过颜色音乐放松身心 | 冥想爱好者 |
9.2 使用建议
┌─────────────────────────────────────────────────────────┐
│ 使用建议 │
├─────────────────────────────────────────────────────────┤
│ │
│ 🎨 颜色选择 │
│ • 尝试不同的色相感受不同音符 │
│ • 调整饱和度感受音量变化 │
│ • 改变亮度体验不同八度 │
│ • 保存喜欢的颜色音乐组合 │
│ │
│ 🎵 音乐探索 │
│ • 从红色开始，感受Do的稳定 │
│ • 到蓝色体验La的空灵 │
│ • 在绿色区域感受Fa的平和 │
│ • 尝试紫色感受Si的神秘 │
│ │
│ 💡 创意玩法 │
│ • 创建彩虹音乐序列 │
│ • 为喜欢的颜色命名 │
│ • 探索冷暖色调的音乐差异 │
│ • 尝试极端亮度对比 │
│ │
└─────────────────────────────────────────────────────────┘十、联觉原理
10.1 联觉现象
| 类型 | 描述 | 示例 |
|---|---|---|
| 色听联觉 | 听到声音时看到颜色 | 听到C音看到红色 |
| 字色联觉 | 看到文字时感知颜色 | 星期一=红色 |
| 数字色联觉 | 数字与颜色关联 | 1=白色，2=蓝色 |
| 空间序列 | 时间有空间位置 | 年份在空间中排列 |
10.2 颜色-音乐心理学
🧠 颜色-音乐心理学 🧠
暖色系（红、橙、黄）
- 音乐特点：明亮、活跃、温暖
- 情感联想：热情、活力、快乐
- 对应音符：Do、Re、Mi
冷色系（绿、青、蓝）
- 音乐特点：平和、深沉、宁静
- 情感联想：平静、信任、智慧
- 对应音符：Fa、Sol、La
紫色系
- 音乐特点：神秘、高贵、梦幻
- 情感联想：创造力、想象力
- 对应音符：Si
十一、音乐理论基础
11.1 音阶与频率
| 音符 | 名称 | 频率(Hz) | 音程关系 |
|---|---|---|---|
| C | Do | 261.63 | 基音 |
| D | Re | 293.66 | 大二度 |
| E | Mi | 329.63 | 大三度 |
| F | Fa | 349.23 | 纯四度 |
| G | Sol | 392.00 | 纯五度 |
| A | La | 440.00 | 大六度 |
| B | Si | 493.88 | 大七度 |
11.2 八度关系
┌─────────────────────────────────────────────────────────┐
│ 八度频率关系 │
├─────────────────────────────────────────────────────────┤
│ │
│ 低八度 (0.5x) │
│ • 频率减半 │
│ • 声音低沉、厚重 │
│ • 对应暗色调 │
│ │
│ 中八度 (1.0x) │
│ • 标准频率 │
│ • 声音自然、平衡 │
│ • 对应中等亮度 │
│ │
│ 高八度 (2.0x) │
│ • 频率翻倍 │
│ • 声音明亮、清脆 │
│ • 对应亮色调 │
│ │
└─────────────────────────────────────────────────────────┘十二、总结
颜色听觉化应用通过"把颜色转换成音乐"的核心理念，为用户提供了一种独特的感官转换体验。应用涵盖颜色选择、颜色预览、音乐映射、音乐播放、颜色保存、信息展示六大核心功能，让用户能够"听见"颜色的声音。
应用采用紫色主题，象征创意与想象力。主页面清晰展示颜色预览圆、三个调节滑块、音乐信息卡片和保存的颜色列表。颜色预览圆实时显示选中颜色和对应音符，播放时产生脉冲动画效果。
颜色-音乐映射算法基于科学的对应关系：色相映射到七个音符（Do-Si），饱和度映射到音量大小，亮度映射到三个八度。这种映射方式符合颜色心理学和音乐理论基础，让用户能够直观理解颜色与音乐的关系。
应用采用Material Design 3设计规范，遵循Flutter最佳实践，代码结构清晰，易于维护和扩展。后续版本计划增加真实音频播放、图片颜色提取、音乐序列生成、作品分享、社区画廊等功能，为用户提供更完整的感官转换体验。
通过颜色听觉化应用，用户可以打破视觉与听觉的感官边界，体验联觉的奇妙感受，发现颜色与音乐之间的神秘联系。
听见颜色的声音，看见音乐的颜色 🎵