企业官网建设流程全解析

简谱大师 - 技术文档

项目概述

简谱大师是一款专业简谱制作桌面软件，使用Electron框架开发，完全对标EOP简谱大师的核心功能。支持简谱的创建、编辑、播放和导出。

技术架构

技术栈

• 前端框架: Electron 27
• 渲染引擎: HTML5 Canvas
• 音频处理: Tone.js
• PDF导出: jsPDF
• 图片导出: html2canvas

项目结构

jianpu-master/ ├── main.js # Electron主进程 - 窗口管理、菜单、文件IO ├── preload.js # 预加载脚本 - 安全的IPC通信桥接 ├── index.html # 主界面 - UI布局和样式 ├── renderer.js # 渲染进程 - 简谱引擎核心 ├── package.json # 项目配置 ├── README.md # 项目说明 └── assets/ # 资源文件夹

核心模块说明

1. 主进程 (main.js)

负责应用生命周期管理、窗口创建、系统菜单、文件操作。

主要功能

• createWindow()- 创建应用窗口
• createMenu()- 创建应用菜单栏
• openFile()- 打开简谱文件
• saveFileAs()- 另存文件

IPC通信

• get-vip-status- 获取VIP状态
• set-vip- 设置VIP状态
• save-file- 保存文件
• save-file-as- 另存文件

2. 渲染进程 (renderer.js)

简谱引擎核心，负责所有简谱相关的渲染和交互。

全局配置 (CONFIG)

{canvasWidth:1000,// 画布宽度canvasHeight:700,// 画布高度staffLineSpacing:12,// 五线谱间距measureWidth:200,// 小节宽度tempo:120,// 速度 BPMcurrentOctave:0,// 当前八度偏移currentDuration:1,// 当前音符时值zoom:1// 缩放比例}

乐谱状态 (STATE)

{title:'',// 曲名timeSignature:'4/4',// 拍号keySignature:'C',// 调号measureCount:4,// 小节数voices:[{name:'主旋律',notes:[]}],// 声部measures:[]// 小节数据}

音符数据结构

{pitch:1,// 音高 1-7duration:1,// 时值 4/2/1/0.5/0.25/0.125modifier:null,// 修饰符 sharp/flat/natural/dot/triplet/fermata/accent/staccatooctaveOffset:0,// 八度偏移velocity:0.6,// 力度voice:0,// 声部isRest:false,// 是否为休止符beamStart:false// 连音开始}

3. 音符渲染 (Canvas)

绘制元素

• 调号和拍号
• 五线谱
• 小节线
• 音符符号
• 修饰符号

符号映射

// 音符符号NOTE_SYMBOLS={4:'𝅝',2:'𝅗𝅥',1:'𝅘𝅥',0.5:'𝅘𝅥𝅮',0.25:'𝅘𝅥𝅯',0.125:'𝅘𝅥𝅰'}// 休止符REST_SYMBOLS={4:'𝄻',2:'𝄼',1:'𝄽',0.5:'𝄾',0.25:'𝄿'}

4. 音频播放

使用Tone.js实现实时音频播放。

音符到频率映射

constNOTE_FREQUENCIES={'1':'C4','2':'D4','3':'E4','4':'F4','5':'G4','6':'A4','7':'B4'};

5. 导出功能

MIDI导出

生成标准MIDI文件，支持音乐软件导入。

图片导出

使用html2canvas导出PNG格式图片。

PDF导出

使用jsPDF导出A4横向PDF文档。

快捷键参考

音符输入

修饰符

导航与编辑

视图控制

文件操作

菜单说明

文件菜单

• 新建 - 创建新乐谱
• 打开 - 打开.jianpu文件
• 保存 - 保存当前文件
• 另存为 - 另存为新文件
• 导出MIDI - 导出为MIDI文件
• 导出图片 - 导出为PNG图片
• 导出PDF - 导出为PDF文档
• 退出 - 退出应用

编辑菜单

• 撤销/重做
• 剪切/复制/粘贴
• 全选

视图菜单

• 放大/缩小/重置缩放
• 开发者工具

帮助菜单

• 快捷键帮助
• 关于

依赖说明

生产依赖

{"electron":"^27.0.0"}

CDN资源

• Tone.js: https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js
• html2canvas: https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js
• jsPDF: https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.min.js

构建与发布

开发模式

npminstallnpmstart

生产构建

npmrun build

打包后的安装包将生成在d1. 首次运行需要网络连接以加载CDN资源 2. 保存文件时会创建.jianpu格式的JSON文件 3. 导出的MIDI文件可在各种音乐软件中打开 4. 建议使用管理员权限运行以避免权限问题 5. 本软件基于Electron开发，**支持macOS系统**（macOS 10.15及以上版本），同时也支持Windows和Linux平台 6. macOS系统下如需使用管理员权限，可通过sudo` 命令启动应用议使用管理员权限运行以避免权限问题