Vue3的在线钢琴模拟器

最新推荐文章于 2024-05-19 19:06:41 发布
最新推荐文章于 2024-05-19 19:06:41 发布
阅读量219 收藏
点赞数 1
文章标签： github javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingbingyihao/article/details/129909742
版权

Vue3的在线钢琴模拟器

设计说明

学习一下钢琴演奏，搭建了这个在线钢琴模拟器；绘制了键盘，添加上了声音等；
但是目前是1.0版本，只支持简单的小字组和小字一组的简谱；以小星星为例

演示截图

演示小星星，可以出来声音，但是画面的效果还没有添加
在这里插入图片描述

后续可以添加：弹出线条，以及歌词提示等功能

前端页面结构

在这里插入图片描述

项目下载

链接：https://pan.baidu.com/s/1siyOMa4fBc9SL2zd5c2MIQ
提取码：0925

Gitee链接

https://gitee.com/anxwefndu/piano-simulator.git

bingbingyihao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用vue.js制作钢琴，支持键盘和鼠标弹奏
04-06
使用框架：vue.js 核心标签：audio 功能：可以通过键盘或者鼠标点击演奏音乐，界面支持看着简谱弹 本钢琴仅供娱乐学习，非专业 适合vuejs初学者借鉴，比较简单的一个小网页应用
用Vue.js和Webpack开发Web在线钢琴
weixin_30239339的博客
08-22 586
缘起 由于童心未泯，之前在手机上玩过钢琴模拟App，但是手机屏幕太小，始终觉得不过瘾。其实对于我这个连基本乐理都不懂的“乐盲”来说，就算给我一台真正的钢琴，我也玩不转。不过是图个新鲜、权当娱乐罢了。最近刚好入手一台带触摸屏的Lenovo Yoga 4 Pro，这倒给了我新的想象空间：大屏幕玩起来是不是更带感？在Win10应用商店里搜了下，还真有各种模拟钢琴的应用，随便选了一款安装。结果非...
vue.js学习笔记：audio标签实现钢琴弹奏
qq_50662136的博客
04-06 751
1、钢琴键盘布置 1、html代码，在键盘内绑定CSS类white、black，用于切换当该键按下松开时的样式，使用v-on监听鼠标事件； <div id="app"> <!-- 钢琴键盘布局 --> <ul :style="{color:fontcolor}" @mouseup="presskey('up')"> <li><div :class="{white:index==1}"@mousedown="press
vue-piano:用vuejs制作的简单JavaScript钢琴
05-10
钢琴 用使用打字稿制作的简单JavaScript钢琴。 样本由爱荷华大学电子音乐工作室提供： :
vue-piano:用Vue.js制作的钢琴组件
03-22
钢琴 Vue的交互式钢琴键盘。 支持点击/键盘事件和某些配置。 。 正在安装 npm i vue-piano-keyboard 或者，您可以从下载UMD版本。 用法 导入并使用该组合物： < template> < div xss=removed> < PianoKeyboard> < / div > < / template > < script > import PianoKeyboard from 'vue-piano-keyboard' export default { name : 'App' , components : { PianoKeyboard } } < / script> 声音的 vue-piano组件使用Tone.js库来播放每个音符的音频，更具体地说，它使用Tone.Synth（这就是组件很大的原因）。 道具 姓
vue3在线Excel系统
08-16
Vue3在线Excel系统是一个基于Vue.js 3.x框架开发的在线电子表格应用程序。它提供了一个用户友好的界面，使用户可以轻松地创建、编辑和管理电子表格数据。 该系统具有以下特点和功能： 响应式布局：Vue3在线Excel系统...
SpringBoot+Vue3在线办公系统教学及资料
06-26
SpringBoot+Vue3在线办公系统教学及资料
vue3 devtools 版本6.5.0
05-04
GitHub上构建完的包，解压后，在Chrome插件管理-加载已解压的扩展程序，即可使用
vue3+express
07-22
vue3 + express的项目中报错：warning in ./node_modules/express/lib/view.js， Critical dependency: the request of a dependency is an expression 的解决方案。 必能解决。
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
电脑钢琴模拟器简体中文免费版.rar
09-04
软件介绍: EveryonePiano是一款钢琴模拟软件，它通过键盘来演奏美妙的钢琴曲，让你0成本学习弹钢琴。本软件为免费版，无需注册即可使用，内置一些比较经典的曲目，可以直接打开播放。软件自带有强大的单色库，单色效果非常逼真，可以完全模拟真实的钢琴，即使你的声卡是集成的，也可以实现无延迟的演奏效果，内置多种插件，可以即时下载并安装。另外，如果你是一个钢琴新手，可以通过丰富的视频教程来快速上手。可以通过字母区及数字区的键位来模拟钢琴的键位，在实际使用中还可以调节面板中的各种参数，如曲调、力度及延音等。注：由在使用中需要使用键盘来模拟，部分杀软可能会误认为软件是在截获用户的键盘信息，从而产生误报，如果遇到这种情况，请将本软件加入到杀毒软件的信任列表中，即可正常使用。
vuecommand一个完全工作的Vuejs终端模拟器
08-11
vue-command：一个完全工作的Vue.js终端模拟器
vueterminalemulator采用Vue模拟器一个终端
08-08
vue-terminal-emulator：采用Vue模拟器一个终端
钢琴练习：一套用于学习弹钢琴的网络应用程序。 使用MIDI.js，ABCJS和Vue制作
02-17
:musical_notes: :musical_keyboard: 钢琴练习 一小组用于学习弹奏/练习钢琴的网络应用程序。 随着我学会玩游戏，这一系列网络应用程序仍在增长。 期待经常更新和更多练习方式！ 当前演示 以下是完成学习的游戏模式的列表： 单笔记练习练习将职员的笔记匹配到正确的键single_note.html 工作正在进行中 计划中的功能和模式的TODO列表： 渲染时间签名 节拍器 一起玩 完整的乐谱（具有不同的技能水平） 可配置的键盘映射 音量可控 依存关系 以下开放源代码库和资源的巨大贡献将无法实现Piano Practice网络应用程序： 上面提到的所有库和资源都在此存储库中重新分发，并带有适当的许可文件。
vue音乐钢琴_GitHub - seayao/vue-music: 基于vue.js的一款音乐APP
weixin_32459553的博客
01-17 346
vue-musicVue.js 开发的一款音乐 App项目树.├── README.md├── build│ ├── build.js│ ├── check-versions.js│ ├── dev-client.js│ ├── dev-server.js│ ├── utils.js│ ├── vue-loader.conf.js│ ├── webpack.base.c...
vue使用在线mock平台用axios请求示例 不用自己安装mockjs
achukou的博客
02-16 623
推荐大家使用useMock 在线Mock助手，项目API数据模拟，声称比内部环境更贴心
vue音乐钢琴_vue移动端用audio做背景音乐
weixin_34571972的博客
02-22 392
我遇到的调代求学功解宗维如请框总行断随以移泉动实坑，主要就是移动端的问题和切换路由导致背景音乐暂微和二第说，班。都年很过过事发工开宗定据发指互数个遍前互就业大经停的问题者第干种用大是使处来框这它段观开有个理和近可以用一个套路来解决：把audio卸载index.html中，写下来上能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动代码1，ht作一新求抖直微圈ml部分2，js...
Github 2024-05-17 Java开源项目日报 Top9
老孙正经胡说
05-17 667
根据Github Trendings的统计，今日(2024-05-17统计)共有9个项目上榜。
github下载代码
最新发布
I'm Zz.
05-19 575
git clone https://<your_token>@github.com//.gitgit remote set-url origin https://<your_token>@github.com//.githttps://juejin.cn/post/7350880189836918820?searchId=202405191828091DB64DD476DF0AEC7442
vue3在线预览pdf
04-25
关于Vue 3的在线预览PDF的问题，我不确定是否有特定的解决方案。但是，你可以使用Vue 3和其他相关技术来实现在线预览PDF的功能。 一种常见的方法是使用PDF.js库，它是一个开源的JavaScript库，可以在网页上渲染和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值