背景
我的目标是创建一个基于 JavaScript 的 Web 应用程序来分析和显示音频源(包括页内源)中的频率信息(<audio>
标签)和从客户端麦克风传输的信号。我一切顺利:)
作为一名热心的萨克斯管演奏家,我的目标之一是通过检查高音分音相对于基本音高的分布来比较不同萨克斯管演奏家和乐器的音调固有的信息。简而言之,我想得出为什么不同的乐器演奏家和乐器品牌即使在演奏相同的音高时听起来也不同的原因。此外,我想将同一演奏者/乐器的各种“替代指法”与传统或标准指法的调音和频率分布进行比较。
使用 JS 访问和显示频率信息是一件相当简单的事情AudioContext.analyserNode
,我将其与HTML5 Canvas
用于创建频率图或与找到的类似的“winamp 样式条形图”的元素“使用 Web 音频 API 进行可视化”@ MDN https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API.
PROBLEM
为了实现我的目标,我需要识别音频源中的一些特定信息,特别是频率in Hertz基音的,用于乐器演奏者/乐器之间的直接比较,以及源的频率范围,以确定我感兴趣的声音的频谱。该信息可以在变量中找到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);
}());
}
};
ISSUES
虽然我可以轻松地代表fData
作为条形图或折线图等<canvas>
API,使得声源的基音和高音部分清晰可见,到目前为止我还无法确定......
- 频率范围为
fData
(最小-最大赫兹)
- 中每个值的频率
fData
(Hz)
没有这个我就无法开始识别源的主频率(为了比较调音与传统音乐音高名称的变化)和/或突出显示或排除所表示光谱的区域(放大或缩小等)进行更详细的检查。
My intention is to prominently display the dominant frequency by pitch (note name) and frequency (Hz) and to display the frequency of any individual bar in the graph on-mouseover. N.B. I already have a data object in which all the frequencies (Hz) of the chromatic pitches between C0-B8 are stored.
尽管阅读了AudioContext.analysisrNode 规范 https://webaudio.github.io/web-audio-api/#the-analysernode-interface好几次,几乎这个网站和 MDN 上的每个页面都涉及这个主题,我仍然不知道如何完成这部分任务。
基本上,我们如何着手改变Uint8Array() fData
转化为每个频率的振幅(以赫兹为单位)的表示,其中fData
数组元素反射。
任何意见、建议或鼓励将不胜感激。
BP