在线钢琴应用AutoPiano

AutoPiano是一个基于HTML5的在线钢琴应用,提供优雅的学习和演奏平台,包括快速入门和演奏示例教学功能。MusicXML是一种开放的XML文件格式,用于记录西式乐谱。本文介绍了如何构建和运行AutoPiano的Docker镜像,以及在群晖上以Docker方式安装的步骤。同时,提到了在运行时要注意的SEO问题和使用端口配置。

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

什么是 AutoPiano ?

自由钢琴(AutoPiano)是利用 HTML5 技术开发的在线钢琴应用,致力于为钢琴爱好者、音乐爱好者以及其他所有的创造者提供一个优雅、简洁的平台,在学习工作之余可以享受钢琴、音乐的美好。AutoPiano 还有教学的功能,一种方式是快速入门,通过简易的谱子按键进行演奏,另一种是演奏示例,通过钢琴曲的自动播放来达到演示的目的。

什么是 MusicXML ?

MusicXML(英语:Music Extensible Markup Language,音乐扩展标记语言)是一个开放的基于 XML 的记录西式乐谱的文件格式。该格式是完全自由、开放记录的,并依据 W3C 社区的许可协议自由使用。

构建镜像

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

老苏开始是基于源代码构建的 Dockerfile

FROM node:lts-alpine as build-base
LABEL maintainer=laosu<wbsu2003@gmail.com>

WORKDIR /app
COPY ./package.json ./
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
COPY . .
RUN cnpm install
RUN cnpm run build

FROM nginx:1.12-alpine
COPY --from=build-base /app/dist /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

运行时发现右上角会显示 请勿基于原版代码构建网站,以免影响原网站SEO,除非大量修改源代码。感谢配合开源工作。

所以只能用 autopiano_build_demo 目录重新构建,这个就简单多了

FROM nginx:1.12-alpine
LABEL maintainer=laosu<wbsu2003@gmail.com>

COPY ./autopiano_build_demo/. /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

构建镜像和容器运行的基本命令如下👇

# 下载源代码
git clone https://github.com/AutoPiano/AutoPiano.git

# 如果 github 慢或者访问不了
git clone https://hub.fastgit.org/AutoPiano/AutoPiano.git

# 进入目录
cd AutoPiano

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

# 生成容器
docker run -d \
--name=autopiano \
-p 3380:80 \
wbsu2003/autopiano:v1

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 autopiano ,选择第三个 wbsu2003/autopiano,版本选择 latest

端口

本地端口不冲突就行

本地端口容器端口
338080

运行

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

练习

选择左侧的 快速入门

开始选首难度一星的

照着字母在键盘上输入就可以了,多练习几次就 OK

点播

选择右侧的 演奏示例

随便选一首播放,播放的曲子后面有暂停按钮

🎹曲子是不错,就是少了点

参考文档

AutoPiano/AutoPiano: 自由钢琴 🎹 AutoPiano ( https://www.autopiano.cn ) Simple & Elegant Piano Online
地址:https://github.com/AutoPiano/AutoPiano

自由钢琴 - AutoPiano | 在线弹钢琴,听钢琴曲,超好听,超好玩 - Play Piano Online
地址:https://www.autopiano.cn/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

杨浦老苏

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

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

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

打赏作者

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

抵扣说明:

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

余额充值