背景
我的目标是创建一个基于 JavaScript 的 Web 应用程序来分析和显示音频源中的频率信息,包括页面内源(<audio>
标签)和来自客户端麦克风的信号。我一切顺利:)
作为一名敏锐的萨克斯手,我的目标之一是通过检查高分音相对于基本音高的分布来比较不同萨克斯手和乐器音色中固有的信息。简而言之,我想解释为什么不同的乐器演奏家和乐器品牌即使在演奏相同的音高时听起来也不同。此外,我想将各种“替代指法”的调音和频率分布与同一演奏者/乐器的传统或标准指法进行比较。
使用 JS 访问和显示频率信息是一件相当简单的事情AudioContext.analyserNode
,我将它与HTML5 Canvas
元素结合使用来创建频率图或“winamp 样式条形图”,类似于在MDN 中找到的“使用 Web 音频 API 的可视化”。
问题
为了实现我的目标,我需要识别音频源中的一些特定信息,特别是基音的赫兹频率,以便在乐器演奏者/乐器之间进行直接比较,以及源的频率范围,以确定频谱我感兴趣的声音。这些信息可以在下面的变量fData
中找到......
// example...
var APP = function() {
// ...select source and initialise etc..
var aCTX = new AudioContext(),
ANAL = aCTX.createAnalyser(),
rANF = requestAnimationFrame,
ucID = null;
ANAL.fftSize = 2048;
function audioSourceStream(stream) {
var source = aCTX.createMediaStreamSource(stream);
source.connect(ANAL);
var fData = new Uint8Array(ANAL.frequencyBinCount);
(function updateCanvas() {
ANAL.getByteFrequencyData(fData);
// using 'fData' to paint HTML5 Canvas
ucID = rANF(updateCanvas);
}());
}
};
问题
虽然我可以fData
通过 API 轻松地将其表示为条形图或折线图等<canvas>
,以使声源的基本部分和上部部分清晰可见,但到目前为止我还无法确定......
fData
(min-max Hz)的频率范围- 每个值的频率
fData
(Hz)
如果没有这个,我就无法开始识别源的主要频率(以便将调音的变化与传统音乐音高名称进行比较)和/或突出或排除所代表频谱的区域(放大或缩小等)以进行更详细的检查。
我的目的是通过音高(音符名称)和频率(Hz)突出显示主要频率,并在鼠标悬停时在图表中显示任何单个条的频率。注意我已经有一个数据对象,其中存储了 C 0 -B 8之间的所有音高频率 (Hz) 。
尽管多次阅读了AudioContext.analysisrNode 规范,并且几乎阅读了这个站点和 MDN 上关于这个主题的每一页,但我仍然对如何完成这部分任务没有确定的想法。
基本上,如何将Uint8Array() fData
中的值转换为以赫兹为单位的每个频率幅度的表示,这些频率由fData
数组元素反映。
任何意见、建议或鼓励将不胜感激。
英国石油公司