{T}

AudioContext实现在线钢琴

学习目标

  • 理解并掌握 AudioContext实现在线钢琴 的核心原理与工程实践

总结

上节学了 AudioContext 的振荡器调音，这节我们基于 AudioContext 实现了一个在线钢琴。

不同键只是振动频率不同，然后按下的时候设置音量有个从小到大再到小的变化就好了。

我们用 styled-components 写的样式，它是通过组件的方式来使用某段样式。

我们监听了 keydown 事件，触发不同键的按下的处理。

然后根据简谱，通过不同 setTimeout 实现了乐曲的自动播放。

做完这个案例，我们会对 AudioContext 有更深的理解。

继续阅读