【发布时间】:2017-11-14 02:42:21
【问题描述】:
背景
我的目标是创建一个基于 JavaScript 的网络应用程序来分析和显示音频源中的频率信息,包括页面内源(<audio> 标签)和从客户端麦克风流式传输的信号。我正在路上:)
作为一名敏锐的萨克斯手,我的目标之一是通过检查高分音与基本音高相关的分布来比较不同萨克斯手和乐器的音色中固有的信息。简而言之,我想解释为什么不同的乐器演奏家和乐器品牌即使在演奏相同的音高时听起来也不同。此外,我想将各种“替代指法”的调音和频率分布与同一演奏者/乐器的传统或标准指法进行比较。
使用 JS AudioContext.analyserNode 访问和显示频率信息是一件相当简单的事情,我将它与 HTML5 Canvas 元素结合使用以创建类似于 @ 找到的频率图或“winamp 样式条形图” 987654321@.
问题
为了实现我的目标,我需要识别音频源中的一些特定信息,主要是基音的赫兹频率,以便在乐器演奏者/乐器之间进行直接比较,以及频率范围来源,以确定我感兴趣的声音的频谱。该信息可以在下面的变量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);
}());
}
};
问题
虽然我可以通过<canvas> API 轻松地将fData 表示为条形图或折线图等,以便清晰可见声源的基本部分和上部部分,但到目前为止我还不能确定...
-
fData的频率范围(最小-最大赫兹) -
fData(Hz) 中每个值的频率
没有这个,我无法开始识别源的主要频率(以便将调音的变化与传统音乐音高名称进行比较)和/或突出或排除所代表的区域光谱(放大或缩小等)进行更详细的检查。
我的目的是通过音高(音符名称)和频率 (Hz) 突出显示主要频率,并在鼠标悬停时在图表中显示任何单个条形的频率。 注意我已经有一个数据对象,其中存储了 C0-B8 之间的所有频率(Hz)。
尽管阅读了多次AudioContext.analyserNode specification,并且几乎阅读了本网站和 MDN 上关于这个主题的每一页,但我仍然对如何完成这部分任务没有确定的想法。
基本上,如何将 Uint8Array() fData 中的值转换为 fData 数组元素所反映的每个频率的幅度(以赫兹为单位)的表示形式。 p>
我们将不胜感激任何建议、建议或鼓励。
BP
【问题讨论】:
-
嗨,Brian,我刚看到这个,想知道你是否完成了这个项目?
-
@Katie.Sun Hiya。我设法让一些东西工作,但最终我想要的应用程序超出了 JS AudioContext API 的功能。现在我正在摆弄一个适用于 Linux 的独立桌面应用程序——它进展缓慢,但我可能有一天会到达那里。 :D
标签: javascript audio html5-audio web-audio-api audiocontext