在线乐谱协作编辑器composing.studio

什么是 composing.studio ？

composing.studio 是使用 Rust、WebAssembly 和 TypeScript 构建的在线实时协作音乐编辑器，采用了 ABC 记谱法，允许任何人创建简单的音乐作品，具有即时乐谱渲染和实时音频播放。任何人都可以通过创建一个新的协作会话，并与其他作曲家共享链接，协同工作。

什么是 ABC 记谱法 ？

ABC 记谱法（ABC Music Notation）出现于 19 世纪，由 Chris Walshaw 发明。ABC 记谱法以 A 到 G 的字母记录音高，再用其它符号来记录变化音、音长等。 ABC 记谱法基于 ASCII ，可以用文本编辑器进行编辑，并且有很多音乐软件可以读取 ABC 符号以及处理成 MIDI 格式文件。

什么是 abc.js ?

Paul Rosen 和 Gregory Dyke 开发的一个渲染 ABC 乐谱的javascript 库，该库可以在网页上显示标准音乐符号，还可以生成MIDI 文件或直接在浏览器中播放。

官网可以直接体验使用：https://composing.studio

构建镜像

没有搜索到镜像，可能是老苏搜索的关键词不对，不过官方提供了 Dockerfile ，可以自己构建。

这个 Dockerfile 采用了多阶段构建，值得学习和进一步研究

如果你不想自己构建，可以跳过，直接阅读下一章节

构建镜像的基本流程如下👇

# 下载代码
git clone https://github.com/ekzhang/composing.studio.git cs

# 进入目录
cd cs

# 构建镜像  
docker build -t wbsu2003/composing-studio:v1 .

# 运行容器
docker run -d --name composing-studio \
--restart=always \
-p 3030:3030 \
wbsu2003/composing-studio:v1

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 wbsu2003 ，找到 wbsu2003/composing-studio，版本选择 latest。

端口

本地端口	容器端口
3030	3030

默认没有映射端口

需要点 + 号自行添加，直接用了默认的端口 3030

运行

在浏览器中输入 http://群晖IP:3030 就能看到主界面

点 ENTER 进入音乐编辑器界面

默认创建的文件名是随机的，可以通过 http://群晖IP:3030/文件名 的方式指定文件名

例如在浏览器中输入 http://192.168.0.199:3030/MoneyLost，会在 documents 目录中新建 MoneyLost

老苏并不懂 ABC 记谱法，下面👇这首是网上找的，可以用于测试，将其复制、并粘贴到中间的编辑区

X: 22
T:Money Lost
M:3/4
L:1/8
Q:1/4=100
C:Paul Rosen
S:Copyright 2007, Paul Rosen
R:Klezmer
K:Dm
Ade|:"Dm"(f2d)e gf|"A7"e2^c4|"Gm"B>>^c BA BG|"A"A3Ade|"Dm"(f2d)e gf|"A7"e2^c4|
"Gm"A>>B "A7"AG FE|1"Dm"D3Ade:|2"Dm"D3DEF||:"Gm"(G2D)E FG|"Dm"A2F4|"Gm"B>>c "A7"BA BG|
"Dm"A3 DEF|"Gm"(G2D)EFG|"Dm"A2F4|"E°"E>>Fy "(A7)"ED^C2|1"Dm"D3DEF:|2"Dm"D6||

预览播放区立刻能看到渲染好的标准乐谱

可以直接播放

将 Share Link 分享给别人之后，Active Users 多出了一个人

可以修改自己的名字

但是需要注意的是，composing.studio 目前还没有保存和下载，但可以通过固定文件名的方式找到编辑过的内容

除非你重启了容器，否则只要输入这个链接，都能看到之前编辑、修改的内容

参考文档

ekzhang/composing.studio: Collaborative music composition for everyone.
地址：https://github.com/ekzhang/composing.studio

Composing Studio
地址：https://composing.studio/

abcjs: Quick Editor
地址：https://editor.drawthedots.com/

abcjs
地址：https://www.abcjs.net/

maiwenan/hexo-tag-abcjs: A hexo tag for rendering abc music notation on your blog posts.
地址：https://github.com/maiwenan/hexo-tag-abcjs

一个渲染ABC乐谱的开源Javascript库abcjs — 1024.COM - 好人一生平安
地址：https://1024.com/a/646

ABC 记谱法教程 - 简书
地址：https://www.jianshu.com/p/f43f9b2aeb2d

使用带有 abcjs 支持的 markdown 编辑器编写五线谱 - 初步印象 - 链滴
地址：https://ld246.com/article/1579424087285