技术分享

基于WebAudio API的频率图实现

这个需求来自于小宇宙Studio的试听页面:试听页面本身除了需要支持播放之外,还有着倍速播放以及展示频率图的需求。好在WebAudio API本身内置的功能足以覆盖这些需求。 音频播放部分浏览器内置播放音频有两种方式,一是使用html5标准中的<audio>标签内置的播放功能,二则是通过WebAudio API来播放。 WebAudio提供了一系列处理音频的能力。在音频处理方面,只要是在某个AudioContext中的Node就拥有着从上一个Node中拿到采样并且处理传递给下一个Node的能力;WebAudio API也有着多种AudioSourceNode,可以通过Stream、Buffer或者MediaElement创建出对应的AudioSourceNode。 在目前的场景下,需要播放的音频是通过URL下载的,因此我们可以通过<audio>标签来完成下载以及解码音频的工作,之后可以通过MediaElementAudioSourceNode来获取解码之后的数据。大致代码如下: const audioElement: HTMLAudioElement = /* 获取到audio标签