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

Posted

技术标签:

【中文标题】使用 WebAudio API 计算 Live Mic Audio 频率的简单代码【英文标题】:Simple code to calculate frequency of Live Mic Audio using WebAudio API 【发布时间】:2014-04-16 15:18:45 【问题描述】:

我有一个网站,我需要在其中显示 Live Mic Audio 的频率。 我有一个this code,但它非常难以理解(它使用傅立叶变换等等)。 在一些研究中,我知道了getByteFrequencyData(),它返回音频的频率。有没有人在 Web Audio API 中使用过 Live Mic Audio?

【问题讨论】:

【参考方案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>

祝你好运。

【讨论】:

我正在寻找一个像这样的带条的简单示例,谢谢! 简直不敢相信,太完美了!谢谢!【参考方案2】:

“显示频率”有很多含义。实际上,我的 PitchDetect 演示不使用傅立叶变换 - 它使用自相关。但这只会给你一个单一的音高,而且准确度很高。如果您的信号有多个同时出现的音符 - 好吧,这是个难题。

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

【讨论】:

您在var audioContext = new AudioContext(); 出现错误,AudioContext 不允许启动。它必须在页面上的用户手势之后恢复(或创建)。

以上是关于使用 WebAudio API 计算 Live Mic Audio 频率的简单代码的主要内容,如果未能解决你的问题,请参考以下文章

使用纯 JavaScript 和 Chromium WebAudio API 生成音调

JavaScript - WebAudio API ScriptProcessorNode InputBuffer getChannelData 精度

如何正确缓存 webaudio 对象?

使用 WebAudio 合并/混合两个音频流

WebAudio - 振荡器 setPeridiocWave

来自WebSocket的WebAudio AAC流媒体播放