跳到主要内容

创建HTML5音频可视化

这个教程旨在帮助您轻松进入功能强大的全新Chrome Web Audio API,这是一种用于在Web应用程序中处理和合成音频的高级JavaScript API。我们将创建一个应用这将循环通过一组提供的音轨,并绘制音频可视化HTML5画布标签。画布动画将使用Paper.js,这是一个功能强大的图形库,提供简洁易用的界面。

这里的目标是让初学者和高级开发人员熟悉API的基础知识,并激发您探索本机音频和动画在浏览器中。如需进一步阅读,请参阅以下资源:完整的Web音频规范;Paper.js;DAT-GUI;和铬项目

01

01首先创建一个空白的HTML文件,然后在标签,链接到空白JavaScript文件(支持文件中的main.js)和三个提供的JavaScript库:Paper.js(用于制作动画到画布),DAT.GUI(用于控件)和Buffer Loader(用于加载多个声音文件) )。

02

02要设置音频,首先使用该调用创建AudioContext的实例新的webkitAudioContext()。这表示一组AudioNode对象及其连接。然后,创建一个指向要加载的音频文件的路径数组,以及一个存储加载的音轨的空数组(此处使用的音乐由dubstep艺术家Jordan Richardson创建)。

03

03要加载单个声音,请使用XMLHttpRequest对象。为了简单起见,我们将在此处(在您的js \ libs \文件夹中)使用通用的BufferLoader类来加载多个声音文件,并在声音加载时触发回调,以便我们可以同时启动它们。请注意,此时我们需要在本地或远程服务器上运行(例如,OSX用户的MAMP)。

04

04对于每个轨道,我们将创建一个AudioBuffer对象和一个AudioGainNode对象,用于调整每个轨道的增益/音量。要从头开始播放每个声音,我们会打电话NoteOn(0);在每个AudioBuffer对象上。最后,我们需要设置一个间隔,每隔215毫秒触发一次环形动画,以匹配轨道的节拍(140 BPM)。

05

05我们的动画以一种方法开始CreateRings()我们的间隔调用,它将遍历每个轨道。在这种方法中,我们将获取轨道的音量,然后设置一个基本算法来创建一个动画环。如果曲目的音量大于零,我们将从圆圈中设置一个响铃的动画。我们将频率(最大215ms)和音量的不透明度基于音量级别。



翻译字数超限