PassNAT LogoPassNAT

免费在线虚拟钢琴AutoPiano自建音乐平台 Vue.js钢琴演奏体验 帕斯内网穿透远程访问音乐应用

作者

小编

发布时间

Curving abstract shapes with an orange and blue gradient

根据我获取到的项目信息,这个项目是一个在线虚拟钢琴应用,但是项目已经被归档且作者明确表示'不安全且不适合部署'。不过我还是按照要求为您提供部署教程:

项目介绍

AutoPiano 是一个免费的在线虚拟钢琴应用,让你可以在浏览器中自由弹奏钢琴。这是一个优秀的音乐平台,适合所有音乐爱好者使用。项目基于 Vue.js 2 + Tone.js 构建,提供了真实的钢琴音效和流畅的演奏体验。

该项目支持键盘弹奏、鼠标点击演奏,并且具有美观的界面设计。无论你是音乐初学者还是专业演奏者,都可以通过这个平台享受弹奏钢琴的乐趣。项目还集成了 MIDI 支持,可以播放和处理 MIDI 文件。

注意:原作者已将此项目归档,并声明仅供学习使用,不建议用于生产环境部署。

项目地址: 点我跳转

部署安装

如需在外也打开项目需要配置内网穿透使用,点击前往 帕斯内网穿透,先注册好账号备用。

由于该项目没有提供 Docker 配置,我们需要手动创建 Docker 部署方案。下面提供最简单的 Docker 单命令部署方式。

打开飞牛 NAS 或其他的 NAS 设备 点击本地镜像-添加镜像-从 URL 添加。这一步先添加 docker 镜像

镜像填 node:14-alpine 等待下载完成后点击启动按钮启动容器

勾选开机自动启动后下一步,端口设置这里。请设置容器端口为 8080,主机端口可以设置为 3000(如果端口冲突可以修改主机端口,但容器内端口必须保持 8080)

存储位置这里,需要创建一个文件夹映射到容器的 /app 目录,用于存放项目代码。

环境变量设置:无需设置特殊环境变量

启动命令需要设置为:

1sh -c "cd /app && npm install -g yarn && yarn install && yarn start"

其他的都不用填写,直接下一步启动就好了。

重要提示: 由于该项目需要先下载代码到映射的目录中,你需要: 1. 在映射的文件夹中下载项目源码 2. 或者使用 git clone https://github.com/AutoPiano/AutoPiano.git

创建成功后可以访问 ip:3000(按照你设置的主机端口修改) 到这里就可以正常显示项目了

穿透公网

打开帕斯内网穿透控制台,点击隧道管理-隧道列表

点击创建新隧道

隧道节点可以随便选,一般选个负载低的就可以

接下来填写信息,隧道名称可以随便填写

本地 IP 默认就可以

传输协议可以选择 TCP 也可以选择 HTTP/HTTPS

HTTP 就是域名的形式,教程以使用 TCP 为演示

本项目中如果没有修改端口的话默认是 3000 端口,这里本地端口就填 3000

远程端口可以留空也可以自定义。下图仅做参考,请按照实际项目端口添加。

填写完毕点击确定

点击刚才创建好的隧道,点击获取配置文件

回到飞牛 NAS,点击应用中心下载 frpc 客户端

打开后粘贴刚才复制的配置文件,点击确定即可

复制帕斯内网穿透控制台的访问 IP 和端口

可以看到已经正常穿透成功了

本篇教程结束