WebAudio体验在线钢琴

全篇共 1278 字。按500字/分钟阅读速度,阅读完预计需要 2.6 分钟。

一个人长大之后做的每一件事,其实都是在成全我们儿时种下的愿望或未完成的梦想。

《毛诗序》有言:

“情动于中而行于言,言之不足,故嗟叹之,嗟叹之不足,故咏歌之,咏歌之不足,不知手之舞之,足之蹈之也。”

音乐也是一座拉近人与人之间距离的桥梁。

我想从两个方面介绍如何借助 webAudio API 完成基本的在线钢琴:

  • 钢琴的布局
  • webAudio API与点击事件完成按键播放

钢琴布局

钢琴一共有88个按键,其中黑键36个,白键52个。如果从任意白键Do(或者叫C键)开始,每7个白键为一组(Do/Re/Mi/Fa/So/La/Xi 或叫 C/D/E/F/G/A/B),每一组还有五个黑键(命名规则是其前一个白键名前加一个“升”字,或者后一个白键名前加“降”字)有规律的分布在白键上方,所以一组有7个白键和5个黑键,如此一来整个键盘便是该组的拷贝,循环往复。

钢琴中有一个特殊的白键,叫中央C,故名思意,88个键中间一组的12个键的第一个白键。

了解了这些规则就能用代码将键盘布局实现出来了。

我采用JavaScript来实现动态布局,需要预先声明一个变量存储88个键的数据:

之后声明一个函数用于渲染钢琴结构,其中遍历到了前面声明的钢琴88键数据:

几点注意

  • 白键按顺序排列。
  • 黑键根据白键位置定位。
  • 运用事件委托机制和冒泡原理,给88个键的父容器添加事件监听器。

webAudio API与点击事件完成按键播放

首先要解决一个关于88键音源加载平衡的问题,这里有三个方案:

  • 88个键音源一次性加载完毕,点击按键时不会有延迟,牺牲空间复杂度,降低时间复杂度。
  • 首次不加载,点击按键时再加载,会有延迟,牺牲时间复杂度,降低空间复杂度。
  • 首次加载中央C键及两侧的常用按键适量个并缓存,此后如果按到未加载银色的按键时那么加载该音色并缓存。

显然,我选择了第三种方案,平衡了时间复杂度与空间复杂度。

据此,我需要几个封装的函数处理这些过程:

  • 用来加载音色文件(这里用到的钢琴音色时ogg格式)。
  • 解码音色文件为 web audio api 能识别的编码(当然也是用到webAudio提供的接口)。
  • 检查按键音色是否存在(也就是按了初次没加载的音色,需要加载并解码音色)。
  • 尝试播放音色。


参考资料 : Web_Audio_API

原创作者 » 陈帅华
版权声明 » 自由转载-保持署名-非商用-非衍生
发布日期 » 2017年3月19日 周日
更新日期 » 2020年8月2日 周日
上一篇 » JavaScript中变量提升那点事儿
下一篇 » Ai绘制SVG矢量图CSS3做动画
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录