canwdev / garageband-piano-js

使用 Vue + WebAudioAPI 实现的库乐队网页钢琴 | Garageband style web app

GarageBand Piano JS

用 Vue + WebAudioAPI 实现的库乐队网页钢琴，灵感来自 GarageBand 钢琴窗口
现已用 Vite+Vue3+TS 重构！

功能特性

• 实现 GarageBand UI
• 基本交互以及弹奏功能
• 使用 Web Audio API
• 窗口可拖动
• 背景 Canvas 可视化效果
• 多种音色（createOscillator）
• 根据短按时长播放音频
• 组合键
• 节拍器
• 滤波器、延音踏板（createBiquadFilter）
• 乐谱录制及播放

开发

yarn
yarn dev

参考

• HTMLAudioElement（仅在v1.0的tag中使用）
• Web Audio API
  • AudioContext
  • 深入浅出 Web Audio Api
  • 利用HTML5 Web Audio API给网页JS交互增加声音
  • MDN Simple_synth
• Music Visualizer (Bars)