做啥事情都喜欢留个记录，免得以后再遇到同样的坑，自己又得从头来一遍。这回折腾这个“声音的色彩游戏官网”，说白了，就是一段从发泄到找回点平静的折腾史。
起心动念：工作上的窝囊气和那口恶气
为啥要搞这个？不是为了什么技术突破，就是为了心里那口恶气。我在老东家那儿，一连干了快八年了，从年轻小伙儿熬成了中年大叔。前阵子，公司搞了个什么“OKR对齐”大会，你知道？就是一群人围在一起，对着PPT，把那点鸡毛蒜皮的事情，说得跟拯救世界一样。整整三天，一句话有八个弯儿，光是把一句简单的话掰扯成“赋能”、“抓手”、“生态位”，就得花一个小时。
我当时就觉得，这TMD都是扯淡。所有的价值判断，都是主观臆测，一句话说得再漂亮，底子也是虚的。我实在忍不了了，当天晚上直接把电脑一关，回家就琢磨，我得找个纯粹不讲道理的东西做做，让结果彻底跟主观情绪脱钩。
我就想，声音这玩意儿，人听起来有情绪。我大声说“你好”是红色，小声说“你好”是蓝色，这没道理。但要是能让电脑，根据声音的纯物理属性（比如频率、振幅），直接生成一个颜色，那它就是绝对客观的。谁也别想给我“赋能”、“对齐”这个颜色！这不就搞起来了，名字就叫“声音的色彩游戏官网”。
第一步：抄起家伙就干，管它三七二十一
说干就干，我第一步就是找个顺手的前端架子。我是真懒得从零开始搭了，直接在GitHub上翻了半天，找了个已经搭好基础路由的脚手架，拽下来就开始改。管它什么架构，能跑就行。
小编温馨提醒：本站只提供游戏介绍，下载游戏请前往89游戏主站，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- 先把脸面糊上： 网站得有个样子？我随便找了几张看起来花里胡哨的色彩图，用最土的办法，一张一张切，直接硬塞进页面里。排版根本没讲究，上下左右对齐，差不多得了。
- 语音权限，这是个坎儿： 要录音，得先搞定浏览器那边的权限。我当时调那个`getUserMedia`，真是把我恶心坏了。不是麦克风没反应，就是浏览器弹窗被我代码给堵住了。我对着MDN（一个技术文档网站）那玩意儿，一句一句去抠，试了一下午，才知道要在点击事件里才能调用，不能直接全局初始化。这破事，耽误了我半天时间。
- 界面巨丑，但能用： 我直接在页面上加了个巨丑的“开始录音”按钮，一个红色的停止按钮，外加一个展示结果的大色块，就这三样。功能第一，审美靠边站。
这第一阶段，主要就是把网站的基础框架和录音功能给捯饬利索了。代码写得稀烂，一堆全局变量，但能运行，我的心里舒服多了，比在公司里开那狗屁会议强太多。
重头戏：声音数据到颜色代码的转换
前面的都是皮毛，核心是“声音怎么变色彩”。这才是我的发泄点，必须搞得客观。我可不是要做什么高精尖的AI识别，我就要它简单粗暴。
我录到的声音数据，本质上就是一堆数字，是声音波形的振幅和频率信息。我决定就用最简单的三个维度来决定颜色：
第一，音量（振幅的平均值）： 我把录音片段切成几百个小块，算出每个小块的平均振幅，把这些平均值加起来，一除，得到一个总音量值。这玩意儿，我直接把它映射到RGB颜色模型里的红色（R）值上。吼得越大声，R值越高，颜色就越偏红，简单！
第二，音高（基础频率）： 这东西相对复杂点。我找了个现成的库，去分析声音文件的主频率。我不用管什么赫兹不赫兹的，我拿到那个频率的数值，直接就往蓝色（B）值上扔。频率高，蓝色就深。我当时的想法就是，尖锐的声音，就该有点冷的蓝色。
第三，变化速度（复杂性）： 我想让声音的“变化”也影响颜色。我就计算了振幅在整个录音过程中的标准差。如果声音起伏很大，标准差就大；如果声音很平稳，标准差就小。这个“变化程度”我就给了绿色（G）。变化越多，G值越高，颜色就越绿。
我把这三个数值（R, G, B）各自拉伸到0到255的范围，拼在一起，就是我的“声音色彩”了。我对着电脑录了一段“喂——”，出来个深紫。接着录了段大吼大叫，出来个亮红色。这玩意儿就是这么武断、这么客观！
收尾：它就这么成了
把计算逻辑和前端的色块一联通，这官网就算基本成型了。你点录音，对着麦克风吼一段，点停止，马上就出来一个十六进制的颜色代码和一个大大的色块。它完全不考虑你说了什么，只管你怎么说。
我把这个“游戏”给公司里那帮只会说空话的同事试了一下，他们录了半天，出来的颜色五花八门，只能对着一个颜色代码大眼瞪小眼，不知道该怎么“赋能”它。那一刻，我心里别提多痛快了。用一个毫无主观情感的系统，治了一下那帮主观情绪泛滥的人。
这项目花了我三个周末，代码烂是烂了点，但它实实在在跑起来了，也把我心里那股闷气给放了出来。一个网站，一个纯粹由物理数据说了算的“色彩游戏”，它就是这么土法上马，野蛮生长起来的。这TMD就叫实战记录！