什么是 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