前言孩子第一次说“我想学钢琴”时家长通常很难马上判断这是一时好奇还是会慢慢变成长期兴趣。如果家里已经有一台飞牛NAS可以先搭一个简单的网页版钢琴体验环境。它当然不能替代真正的钢琴也无法训练真实琴键的力度和手型但用来认识琴键、尝试简单旋律和感受节奏门槛会低很多。AutoPiano就是这样一类浏览器钢琴工具。部署完成后不需要在电脑、平板和手机上分别安装客户端只要打开NAS对应的网页地址就可以进入琴键页面进行体验。本文将在飞牛NAS中通过Docker运行AutoPiano把服务映射到3030端口并实际查看曲目、教学和页面中的相关功能。局域网使用完成后还会通过cpolar为3030端口创建公网入口让其他网络中的设备也可以打开这套网页版钢琴。1.什么是AutoPianoAutoPiano是一个开源的网页版虚拟钢琴应用它让你无需安装任何软件只需打开浏览器就能在电脑、平板或手机上弹奏钢琴。核心特点特性说明纯网页运行基于 HTML5 Web Audio API无需 Flash 或插件键盘支持可用电脑键盘按键模拟琴键通常 A~; 对应中央 C 附近音符触屏友好在手机/平板上可直接点击屏幕琴键演奏多音色切换支持钢琴、电钢、风琴等多种乐器音色取决于具体版本完全免费 开源代码公开无广告、无付费墙可私有部署特性说明纯网页运行基于 HTML5 Web Audio API无需 Flash 或插件键盘支持可用电脑键盘按键模拟琴键通常 A~; 对应中央 C 附近音符触屏友好在手机/平板上可直接点击屏幕琴键演奏多音色切换支持钢琴、电钢、风琴等多种乐器音色取决于具体版本完全免费 开源代码公开无广告、无付费墙可私有部署技术背景前端技术通常使用JavaScript如Vue.js、React或原生Web Audio音频引擎基于浏览器的Web Audio API能生成高质量合成音部署方式打包成静态网站可通过Nginx、Node.js或Docker轻松部署典型项目名GitHub上常见项目如davidjbradshaw/piano中文社区流行的 “自由钢琴” 多指基于类似原理的增强版如baiyuetribe/onekey:piano镜像所用为什么适合家庭 NAS如飞牛 fnOS / 群晖轻量级资源占用极低老旧设备也能跑私有化部署数据不外传孩子使用更安全随时访问局域网内任何设备打开浏览器即可练习零成本试水在购买实体钢琴前先验证孩子是否真有兴趣2.安装前提条件2.1ssh远程连接到飞牛开启【SSH 服务】使用终端Windows PowerShell / Mac Terminal登录在设置—SSH中开启SSH服务2.2验证docker是否开启使用命令docker-vsystemctl status-v也可以直接在飞牛主页查看其他机器也是这样的哦~3.部署AutoPiano3.1 安装AutoPiano本文使用docker一键部署dockerrun-d\-p3030:5000\-eHOST0.0.0.0\-ePORT5000\--namepiano\baiyuetribe/onekey:piano部署完成后在浏览器中输入http://飞牛IP:3030就能看到AutoPiano的界面3.2 使用AutoPiano部署完成后我们就可以看见autopiano的页面。特别容易上手好操作下面选项可以自由选择点击这里可以跳转音乐平台链接下面有音乐曲目我们点击进去有教学就不用费力去网上寻找了还有演示视频你是否遇到过这样的场景在家里的飞牛NASfnOS或群晖上成功部署了AutoPiano孩子可以在局域网内愉快地练习。但一出门——爷爷奶奶想看看孙子弹琴朋友想远程试玩自己在公司突然来了灵感想即兴演奏统统不行因为服务只在本地网络可见。这时候你就需要一个强大的内网穿透工具 —— cpolar。跟我继续配置吧4.安装cpolar实现随时随地开发4.1 什么是cpolarcpolar是一款安全高效的内网穿透工具无需公网IP或复杂配置只需一条命令即可将本地服务器、Web服务或任意端口映射到公网让你随时随地远程访问内网应用特别适合开发调试、远程运维和应急部署等场景。4.2 部署cpolarcpolar 可以将你本地电脑中的服务如 SSH、Web、数据库映射到公网。即使你在家里或外出时也可以通过公网地址连接回本地运行的开发环境。❤️以下是安装cpolar步骤使用一键脚本安装命令sudocurlhttps://get.cpolar.sh|sh安装完成后执行下方命令查看cpolar服务状态如图所示即为正常启动sudosystemctl status cpolarCpolar安装和成功启动服务后在浏览器上输入虚拟机主机IP加9200端口即:【http://ip:9200】访问Cpolar管理界面使用Cpolar官网注册的账号登录,登录后即可看到cpolar web 配置界面,接下来在web 界面配置即可打开浏览器访问本地9200端口使用cpolar账户密码登录即可,登录后即可对隧道进行管理。5.配置公网地址登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理——创建隧道隧道名称可自定义本例使用了:piano注意不要与已有的隧道名称重复协议http本地地址3030域名类型随机域名地区选择China Top创建成功后打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了公网地址接下来就可以在其他电脑或者移动端设备异地上使用地址访问。访问成功。6.保留固定公网地址使用cpolar为其配置二级子域名该地址为固定地址不会随机变化。点击左侧的预留选择保留二级子域名地区选择china Top然后设置一个二级子域名名称我使用的是piano大家可以自定义。填写备注信息点击保留。登录cpolar web UI管理界面点击左侧仪表盘的隧道管理——隧道列表找到所要配置的隧道点击右侧的编辑。修改隧道信息将保留成功的二级子域名配置到隧道中域名类型选择二级子域名Sub Domain填写保留成功的二级子域名地区: China Top点击更新更新完成后打开在线隧道列表此时可以看到随机的公网地址已经发生变化地址名称也变成了保留和固定的二级子域名名称。最后我们使用固定的公网地址在任意设备的浏览器中访问可以看到成功访问的页面这样一个永久不会变化的二级子域名公网网址即设置好了。总结完成以上配置后AutoPiano已经通过Docker运行在飞牛NAS中并可以通过3030端口在浏览器中打开。电脑可以使用键盘或页面琴键进行操作手机和平板则可以直接通过触屏体验。页面中还提供了曲目、教学和演示等内容可以用来熟悉简单的旋律和操作方式。对于刚刚开始对钢琴产生兴趣的孩子来说这种浏览器工具更适合作为一个轻量的体验入口。真正进入系统学习以后仍然需要实体琴键和更规范的练习方式。通过cpolar为3030端口创建公网隧道后原本只能在家庭局域网中打开的AutoPiano也可以从其他网络环境访问。随机域名适合临时使用配置固定二级子域名后可以获得一个更加方便收藏和持续使用的访问入口。从飞牛NAS部署AutoPiano到浏览器弹奏、曲目体验和公网访问本文完成了一套家庭网页版钢琴体验环境。