AI DAW 音频项目开发与总结

• 其实项目一开始是希望能使用 RxJS 来解决用户操作的原子事务的更新，但是因为其他两个同事对 rx 不熟，可能会引起更多麻烦，遂作罢。但是一开始如果设计上的话，undo redo 的实现会比较简单，可以直接对单一行为或者对象实现三个基类方法，do / undo / update。

• 不敢想如果没有 cursor 和 claude 的话，两个2-1 + 一个实习生肯定做不完这个项目，我个人的话 token 这俩月花了 4kw，实习生虽然模块都比较简单，但是花了 1 个多亿 token。

• 提问准确：
• 实习生同学对很多概念或者设计不熟，所以提问总是描述不到点上，有时候为了抽象而抽象，最后写出来的东西复杂+可读性差。
• 03 年的实习生同学有个点，从来没有看过 MDN 的官方文档，任何不会的东西都是直接问大模型，感觉脑子里没有指针指向解决问题的API or 实现细节，提问时只有想要xx 结果，不会描述为使用 xxx 能力和方案实现 xxx，所以会花费大量时间返工。
 

• 从小积木开始搭，设计好方案和流程图：
• 模块实现开始，最好能把不同的小函数和小组件定义好之后，再搭建完整的模块。从小往大了实现，而不是从大往小了实现，否则会不停因为内部细节的确认返工很多次。这样小积木可以复用的地方可能会更多一些。
 

• 多@参考文件和有帮助的资源
• 多提供参考资料，参考 xx 实现一个 xx 也是加速开发的一个非常重要的能力

🏗️ 核心架构

• WASM音频引擎: 使用WebAssembly实现高性能音频处理核心

• Audio Worklet: 精确控制音频缓冲区大小和延迟

• Web Workers: 多线程处理音频任务，避免主线程阻塞

• Zustand 作为状态管理工具，轻量级且高性能

• 撤销/重做系统: 复杂的操作历史管理，支持最多5步撤销

• 实时状态同步: DAW 引擎状态与 UI 状态的双向绑定

• 初始化处理资源加载

• 统一管理拖拽管理器

• Canvas 多段渲染

• 时间轴网格吸附，对象边界吸附

graph TD
    subgraph "音频引擎架构"
        A[用户操作] --> B[DAW Service]
        B --> C[DAW Core]
        C --> D[WASM Audio Engine]
        D --> E[Audio Worklet Processor]
        E --> F[Audio Context]
        F --> G[音频输出]
        
        H[音频文件] --> I[VOD Upload]
        I --> J[Format Conversion]
        J --> K[Audio Buffer]
        K --> D
    end
   
    

graph TD
subgraph "撤销/重做系统"
    W[用户操作] --> X[记录操作信息]
    X --> Y[执行操作]
    Y --> Z[更新状态]
    Z --> AA[添加到撤销栈]
    
    BB[撤销请求] --> CC{检查撤销栈}
    CC -->|有操作| DD[获取操作信息]
    DD --> EE[执行撤销逻辑]
    EE --> FF[更新状态]
    FF --> GG[移动到重做栈]
    
    HH[重做请求] --> II{检查重做栈}
    II -->|有操作| JJ[获取操作信息]
    JJ --> KK[执行重做逻辑]
    KK --> LL[更新状态]
    LL --> MM[移动到撤销栈]
end

graph TD
subgraph "拖拽系统流程"
        L[文件拖拽开始] --> M[Drag Manager]
        M --> N{文件类型检查}
        N -->|音频文件| O[音频处理]
        N -->|素材文件| P[素材处理]
        
        O --> Q[计算拖拽位置]
        P --> Q
        Q --> R[吸附算法]
        R --> S[预览渲染]
        S --> T[拖拽结束]
        T --> U[创建音频片段]
        U --> V[更新轨道状态]
    end
    

graph TD
    
    subgraph "AI分析流程"
        L[音频文件] --> M[创建分析任务]
        M --> N[BPM检测]
        M --> O[调式检测]
        M --> P[节拍检测]
        N --> Q[轮询任务状态]
        O --> Q
        P --> Q
        Q --> R{任务完成?}
        R -->|否| Q
        R -->|是| S[更新项目设置]
    end

graph TD
    subgraph "性能优化策略"
        E[音频渲染] --> F[Web Workers]
        F --> G[Audio Worklet]
        G --> H[WASM加速]
        
        I[UI渲染] --> J[Canvas优化]
        J --> K[分段渲染]
        K --> L[纹理管理]
        
        M[内存管理] --> N[对象池]
        N --> O[垃圾回收优化]
        O --> P[缓存策略]
    end

graph TD
    subgraph "GainAndPanPlugin"
        A[输入音频] --> B[Gain控制]
        B --> C[Pan控制]
        C --> D[输出音频]
    end
    
    subgraph "PitchAndTempoPlugin"
        E[输入音频] --> F[Pitch Shift]
        F --> G[Tempo Change]
        G --> H[输出音频]
    end
    
    subgraph "MDSPRackPlugin"
        I[输入音频] --> J[MDSP效果器]
        J --> K[效果参数]
        K --> L[输出音频]
    end
    
    subgraph "AutoTunePlugin"
        M[输入音频] --> N[音高检测]
        N --> O[音高校正]
        O --> P[输出音频]
    end
    
    subgraph "ReverbPlugin"
        Q[输入音频] --> R[混响算法]
        R --> S[空间参数]
        S --> T[输出音频]
    end
    
    style B fill:#99ffcc
    style C fill:#99ffcc
    style F fill:#99ffcc
    style G fill:#99ffcc
    style J fill:#99ffcc
    style N fill:#99ffcc
    style O fill:#99ffcc
    style R fill:#99ffcc