使用WebAudio API计算Live Mic Audio频率的简单代码

Question

我有网站,我需要显示Live Mic Audio的频率.我有一个这个代码,但它很难理解(它使用傅里叶变换和所有).在一些研究中,我知道getByteFrequencyData()哪个返回音频的频率.有没有人之前使用过Live Mic Audio,最好是在Web Audio API中？

Answer 1

我写了一个简单的代码,您可以在网页中显示频率:

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>

祝好运.

Answer 2

"显示频率"可能意味着许多事情.实际上,我的PitchDetect演示不使用傅里叶变换 - 它使用自相关.但这只会给你一个高精度的音高.如果你的信号有多个同时注释 - 那么,这是一个难题.

如果您想查看实时麦克风输入的频率分析细分,请查看http://webaudiodemos.appspot.com/AudioRecorder/index.html(代码:https://github.com/cwilso/AudioRecorder).它使用RealtimeAnalyser中的内置FFT显示实时音频信号的频谱图.