简单几步,上线西部世界里同款自动钢琴

简介: 基于云开发平台把自动钢琴搬到了线上,只需简单几步就实现同款自动钢琴。

场景介绍

基于云开发平台把自动钢琴搬到了线上,只需简单几步就实现同款自动钢琴。
原文场景体验
在西部世界著名的Mariposa酒吧里,当带着乐谱气孔的纸卷转动经过自动钢琴时,通过气孔,触发相应的气阀,气阀再驱动安装在键盘底部的电磁线圈,电磁线圈作为动力部件,再推动钢琴榔头去敲击琴弦,标志性的自动钢琴的琴键自由舞动,弹奏着熟悉的音乐。基于云开发平台把自动钢琴搬到了线上,只需简单几步就实现同款自动钢琴。上线后有60多首歌,小星星、成都、千与千寻、告白气球、晴天等。可以自动弹奏,也可以使用键盘定制的曲谱自己弹奏。立即体验创造一台随身携带的自动钢琴吧。

创建“Vue JS自由钢琴”

环境需求:
可以上网的浏览器,登陆 https://workbench.aliyun.com/

操作步骤:
从账号的创建到一键部署,手把手教你零基础创建自动钢琴。

  1. 点击主页上的登陆按钮登陆阿里云账号,没有账号注册后登陆即可
  2. 填写团队名称,使用规模选1-10即可

开发部署

点击应用卡片上的“开发部署”进入CloudIDE开发界面。按照下图调出命令行,输下面的两行命令安装依赖和构建,详细使用文档可查看README.md
在这里插入图片描述
首先安装依赖

npm install

构建产物

npm run build

a. 点击左侧的tab,然后进行一键部署

在这里插入图片描述

预览自由钢琴

点击命令行中的二级域名就可以预览你的自由钢琴了,

通过配置的域名进行访问了,赶紧让小伙伴们来关注吧。
在这里插入图片描述

部署成功后,会给出一个免费的临时测试域名用于访问部署到线上的效果。如果你要用自己的域名长期访问,可以参见以下文档继续在线上环境进行部署和发布上线。

https://help.aliyun.com/document_detail/176711.html

目前有60多首歌,小星星,成都,千与千寻,告白气球,晴天等。可以自动弹奏,也有键盘定制的曲谱自己弹奏。立即体验创造一台随身携带的自动钢琴吧。

相关文章
|
运维 Cloud Native 前端开发
如何解决 503 Service Temporarily Unavailable?
如何解决 503 Service Temporarily Unavailable?
3382 0
|
7月前
|
人工智能 开发者
阿里云携手超90%金融机构,交出2025年度答卷
2025年,AI浪潮席卷而来,创新触手可及。值此年末,阿里云开启年度成绩单发布之旅。这是一份回顾,更是一声致谢——感恩每位客户与开发者的信赖相伴。砥砺前行,共赴智能未来!
448 10
|
Android开发 容器
鸿蒙开发:使用nestedScroll解决滑动冲突
nestedScroll属性的作用,主要是,用于设置嵌套滚动选项,设置前后两个方向的嵌套滚动模式,实现与父组件的滚动联动。
384 19
鸿蒙开发:使用nestedScroll解决滑动冲突
|
人工智能 编解码 5G
虚拟现实(VR)与增强现实(AR)的融合:开启全新交互时代
【6月更文挑战第17天】虚拟现实(VR)与增强现实(AR)融合成混合现实(MR),打造全新交互体验。MR结合VR的沉浸感和AR的现实增强,应用于教育、游戏、设计和营销,带来创新教学方式、沉浸式游戏体验和高效设计工具。尽管面临技术挑战,随着5G和AI的发展,MR有望引领未来交互的革命。
1048 5
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
914 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
Idea 进行远程服务器debug操作
Idea 进行远程服务器debug操作
1536 0
|
存储 C语言
【C语言数据结构4】-- 链表的实现
链表是线性表的一种,同顺序表一样,都是最基础的线性表。与顺序表的区别在于使用了不同存储结构实现,顺序表使用顺序存储结构,而链表使用链式存储结构。
855 131
|
数据库 Java Spring
免费开题报告|基于SpringBoot+Vue的校内跑腿平台
免费开题报告|基于SpringBoot+Vue的校内跑腿平台
366 0
免费开题报告|基于SpringBoot+Vue的校内跑腿平台
|
安全 Windows
Windows关闭Microsoft Defender服务
【8月更文挑战第19天】以下是关闭Windows系统中Microsoft Defender的几种方法:通过设置界面可临时关闭实时保护等功能;使用组策略编辑器(专业版适用)可较彻底关闭;修改注册表需谨慎;或利用第三方工具如Defender Control便捷操作。关闭后系统将失去实时防护,请确保有其他可靠安全软件保护。
8312 0
|
测试技术
【实战OBB】自定义旋转对象检测
【实战OBB】自定义旋转对象检测
437 0

热门文章

最新文章