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

什么是 composing.studio ?

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

什么是 ABC 记谱法 ?

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

什么是 abc.js ?

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

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

构建镜像

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 下载代码
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 记谱法,下面👇这首是网上找的,可以用于测试,将其复制、并粘贴到中间的编辑区

1
2
3
4
5
6
7
8
9
10
11
12
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