javascript 使用 WebAudio API 计算 Live Mic Audio 频率的简单代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23113580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple code to calculate frequency of Live Mic Audio using WebAudio API
提问by FlyingAura
I have website in which I need to display the frequency of the Live Mic Audio.
I have a this code, but its extremely difficult to understand (It uses Fourier Transform and all).
On some research I got to know of getByteFrequencyData()which returns the frequency of the audio. Has anyone used it before with Live Mic Audio preferably in Web Audio API?
我有一个网站，我需要在其中显示 Live Mic Audio 的频率。我有一个这个代码，但它很难理解（它使用傅立叶变换和所有）。在一些研究中，我知道getByteFrequencyData()哪个返回音频的频率。有没有人在 Live Mic Audio 之前使用过它，最好是在 Web Audio API 中？
回答by Ali
I write a simple code that you can show frequency in your webpage:
我写了一个简单的代码，你可以在你的网页中显示频率：
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
const source = audioCtx.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 32;
let frequencyData = new Uint8Array(analyser.frequencyBinCount);
function renderFrame() {
analyser.getByteFrequencyData(frequencyData);
P10.style.height = ((frequencyData[0] * 100) / 256) + "%";
P20.style.height = ((frequencyData[1] * 100) / 256) + "%";
P30.style.height = ((frequencyData[2] * 100) / 256) + "%";
P40.style.height = ((frequencyData[3] * 100) / 256) + "%";
P50.style.height = ((frequencyData[4] * 100) / 256) + "%";
P60.style.height = ((frequencyData[5] * 100) / 256) + "%";
P70.style.height = ((frequencyData[6] * 100) / 256) + "%";
P80.style.height = ((frequencyData[7] * 100) / 256) + "%";
P90.style.height = ((frequencyData[8] * 100) / 256) + "%";
console.log(frequencyData)
requestAnimationFrame(renderFrame);
}
audio.pause();
audio.play();
renderFrame();#bar {
position: fixed;
top: 20%;
left: 40%;
width: 40%;
height: 40%;
-webkit-transition: 0.1s ease all;
}
.p {
background-color: blue;
height: 100%;
width: 10%;
float: left;
}<audio id="audio" src="2.mp3"></audio>
<div id="bar">
<div id="P10" class="p"></div>
<div id="P20" class="p"></div>
<div id="P30" class="p"></div>
<div id="P40" class="p"></div>
<div id="P50" class="p"></div>
<div id="P60" class="p"></div>
<div id="P70" class="p"></div>
<div id="P80" class="p"></div>
<div id="P90" class="p"></div>
</div>Good luck.
祝你好运。
回答by cwilso
"Displaying the frequency" can mean many things. Actually, my PitchDetect demo DOESN'T use a Fourier Transform - it uses autocorrelation. But that will only give you a single pitch, at high accuracy. If your signal has multiple simultaneous notes - well, that's a hard problem.
“显示频率”可能意味着很多事情。实际上，我的 PitchDetect 演示不使用傅立叶变换 - 它使用自相关。但这只会以高精度为您提供一个音高。如果您的信号有多个同时出现的音符 - 好吧，这是一个难题。
If you want to see a frequency analysis breakdown of the live mic input, check out http://webaudiodemos.appspot.com/AudioRecorder/index.html(code at https://github.com/cwilso/AudioRecorder). That uses the built-in FFT in the RealtimeAnalyser to show a frequency spectrum graph of a live audio signal.
如果您想查看现场麦克风输入的频率分析细分，请查看http://webaudiodemos.appspot.com/AudioRecorder/index.html（代码位于https://github.com/cwilso/AudioRecorder）。它使用 RealtimeAnalyser 中的内置 FFT 来显示实时音频信号的频谱图。
