使用WebAudio API计算现场麦克风音频频率的简单代码

我有我需要显示现场麦克风音频频率的网站。我有一个this code，但它非常难以理解（它使用傅立叶变换和所有）。在一些研究中，我了解了getByteFrequencyData()，它返回音频的频率。有没有人用过Live Audio最好在Web Audio API中使用它？使用WebAudio API计算现场麦克风音频频率的简单代码

来源

2014-04-16 FlyingAura

“显示频率”可能意味着很多事情。实际上，我的PitchDetect演示不使用傅里叶变换 - 它使用自相关。但这只会给你一个高精度的单一音调。如果你的信号有多个同步音符 - 好吧，这是一个难题。

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

来源

2014-04-16 17:01:34 cwilso

我写一个简单的代码，您可以显示在您的网页频率：

<body> 
<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>

而且剧本是

<style> 
    #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; 
    } 

</style> 
<script> 
    window.onload = function() { 
     audioCtx = new AudioContext(); 
     analyser = audioCtx.createAnalyser(); 
     source = audioCtx.createMediaElementSource(audio); 
     source.connect(analyser); 
     analyser.connect(audioCtx.destination); 
     analyser.fftSize = 32; 

     var 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(); 
    }; 
</script>

好运。

来源

2015-09-18 10:05:12

我正在寻找一个这样的酒吧简单的例子，谢谢！ – Macumbaomuerte

我不能相信它，它是完美的！谢谢！ –

使用WebAudio API计算现场麦克风音频频率的简单代码

回答

相关问题