NoteDigger 项目使用与配置指南

2026-01-31 04:15:19作者：申梦珏Efrain

1. 项目目录结构及介绍

NoteDigger 项目是一个纯前端的音乐转录工具，项目目录结构如下：

noteDigger/
│  app.js                  # 主程序文件
│  beatBar.js              # 节奏信息相关脚本
│  channelDiv.js           # 多音轨UI界面类
│  contextMenu.js          # 右键菜单类
│  favicon.ico             # 网站图标
│  index.html              # 程序入口，主要包含页面布局和按钮事件绑定
│  LICENSE                 # 开源协议文件
│  midi.js                 # MIDI文件的创建和解析类
│  myRange.js              # 滑动条的封装类
│  README.md               # 项目说明文件
│  saver.js                # 二进制保存相关脚本
│  siderMenu.js            # 侧边栏菜单类
│  snapshot.js             # 快照类，用于实现撤销和重做功能
│  tinySynth.js            # 合成器类，负责播放音频
│  fakeAudio.js            # 模拟无声Audio类，用于MIDI编辑器模式
│  todo.md                 # 设计思路和待办事项记录
│
├─dataProcess/
│  │  analyser.js           # 频域数据分析与简化
│  │  fft_real.js           # 实数FFT获取频域数据
│  │  midiExport.js         # 导出MIDI文件的相关处理
│  |
│  ├─AI/
│  │      basicamt.js       # 开启后台AMT处理
│  │      basicamt_44100.onnx # 神经网络模型文件
│  │      basicamt_worker.js # 新线程，用于AI处理
│  │
│  │  └─dist/               # ONNXruntime打包文件
│  │          bundle.min.js
│  │          ort-wasm-simd.wasm
│  |
│  └─CQT/
│      │  cqt.js            # 开启后台CQT处理
│      │  cqt.wasm.js       # emcc编译的胶水代码
│      │  cqt.wasm.wasm     # emcc编译的WASM文件
│      │  cqt_worker.js     # 新线程，用于CQT处理
│      │
│      └─.vscode/
│              c_cpp_properties.json # C++环境配置
│              tasks.json            # emcc编译命令
│
├─img/
│      github-mark-white.png
│      logo-small.png
│      logo.png
│      logo_text.png
│
├─style/
│  askUI.css               # 达到类似<dialog>效果的样式
│  channelDiv.css          # 多音轨UI样式
│  contextMenu.css         # 右键菜单样式
│  myRange.css             # 包装滑动条样式
│  siderMenu.css           # 侧边栏菜单样式
│  style.css               # index中独立元素的样式
│
└─icon/                   # 阿里图标库得到的图标文件
        iconfont.css
        iconfont.ttf
        iconfont.woff
        iconfont.woff2

2. 项目的启动文件介绍

项目的启动文件是 index.html，它是网页的入口点。该文件定义了页面的基本结构，并包含了所有必要的JavaScript文件。用户通过浏览器打开这个文件，即可启动NoteDigger应用程序。

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>NoteDigger</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="style/style.css">
    <!-- 引入JavaScript文件 -->
    <script src="app.js"></script>
    <!-- 其他头部信息 -->
</head>
<body>
    <!-- 页面内容 -->
    <div id="app"></div>
    <!-- 页面脚本 -->
    <script>
        // JavaScript代码，用于初始化和绑定事件
    </script>
</body>
</html>