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

本文介绍了一款利用Rust、WebAssembly和TypeScript构建的在线音乐编辑器composing.studio,它支持ABC记谱法,实现实时协作和乐谱渲染。通过Docker构建及使用教程,了解如何在群晖上搭建并分享音乐创作体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是 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 采用了多阶段构建,值得学习和进一步研究

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

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

# 下载代码
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

端口

本地端口容器端口
30303030

默认没有映射端口

需要点 + 号自行添加,直接用了默认的端口 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

对于真正喜欢音乐的人来说,最大的享受不在于听,而在于创作,写自己的音乐,唱自己的歌。现在就为大家推荐这款软件-乐谱编辑(Encore) ,在电脑上我们就可以完成音乐的创作过程,让我们在编辑的过程中,静静聆听那拂过心间的旋律。 软件测试: 1.首先我们来看下界面:   2.工具栏与工具条: 1、常用工具栏 2、自定义工具栏 3、工具条 工具条共有11条,包括音符、谱号、图形、工具、力度、标记1、标记2、符号、吉他、表情、颜色等绘谱所需要的工具。他们可以在工作过程中根据需要打开、关闭和移动。如果这个工具条看不见了,可在“窗口菜单”的“工具条”中点击“音符” 工具条(或其他工具条),重新打开他。 Encore特点: Encore4.5界面最大的特点,就是界面十分简洁,非常朴素,这也是区别于其他几个软件的地方。它的优点是界面简洁明了,没有专业学过打谱软件的人也能一用就会,它可以制作打印钢琴谱、带伴奏器乐声以及交响乐总谱等等一系列常用乐谱,基本上可以满足一般乐谱制作的要求。另外Encore自带音序器,可以通过音源(声卡)来播放乐曲,功能非常实用。Encore虽然看上去比较简单,但是它的功能却一点儿也不少。 因为界面简单明了,因此这个软件的启动速度也是非常迅速。Encore4.5虽然没有华丽的编辑界面,但是它的功能不逊于其他同类软件,界面的友好性也非常好,很容易上手,使用简单,与Finale相比,学习使用起来比较方便,更加人性化。 由于没有其他软件非常繁琐的功能设置,因此这个软件是很多计算机作曲以及计算机乐谱排版人士的首选。 如果你下载的乐谱文件,扩展名为enc,就说明该文件为Encore格式的乐谱文件,需要此软件打开、浏览或打印。 Encore截图:
Spanned.SPAN_COMPOSING 是一个常量,用于表示一个跨度对象(Span)正在处于组合文本输入的状态。它是用于处理复杂文本输入和编辑的 Android 文本样式类 Spanned 的一个标记常量。 当用户正在进行组合文本输入(如中文输入法的拼音输入)时,输入的文本可能会被拆分成多个部分,并且在用户最终确定输入之前,这些部分可能会不断变化。SPAN_COMPOSING 被用于标记这些处于组合输入状态的文本部分,以便在显示和处理这些文本时进行特殊处理。 在使用 Spanned 接口及其实现类(如 SpannableString 或 SpannableStringBuilder)处理文本时,可以使用 Spanned.SPAN_COMPOSING 来标记处于组合输入状态的文本部分。例如,你可以使用 setSpan() 方法将 Spanned.SPAN_COMPOSING 应用于文本的特定范围,以便在显示或处理文本时对这些部分进行特殊处理。 以下是一个使用 Spanned.SPAN_COMPOSING 的示例: ```java SpannableString spannableString = new SpannableString("Hello World"); spannableString.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, Spanned.SPAN_COMPOSING); textView.setText(spannableString); ``` 在上面的示例中,"Hello" 这个单词将被标记为处于组合输入状态,并且会应用红色前景色。这样,当用户在输入过程中修改或删除这部分文本时,可以对其进行特殊处理,以提供更好的用户体验。 希望这个解释对你有所帮助!如果还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨浦老苏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值