https://composing.studio/filthy-design-6478

什么是 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
AI寫代碼
bash

1
2
3
4
5
6
7
8
9
10
11
12
13
14
安裝
在群暉上以 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||
AI寫代碼
json

1
2
3
4
5
6
7
8
9
10
11
12
預覽播放區立刻能看到渲染好的標準樂譜

可以直接播放

將 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
————————————————

版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

原文鏈接：https://blog.csdn.net/wbsu2004/article/details/120620457