Ho sito in cui ho bisogno di visualizzare la frequenza della tensione Mic Audio. Ho una this code, ma è estremamente difficile capire (Esso utilizza Fourier Transform e tutti). Su alcune ricerche ho avuto modo di conoscere di getByteFrequencyData() che restituisce la frequenza dell'audio. Qualcuno lo ha mai usato prima con Live Mic Audio preferibilmente nell'API Web Audio?codice semplice per calcolare la frequenza a Live Mic audio utilizzando WebAudio API
"Visualizzazione della frequenza" può significare molte cose. In realtà, la mia demo di PitchDetect NON usa una trasformata di Fourier: utilizza l'autocorrelazione. Ma questo ti darà solo un passo unico, ad alta precisione. Se il tuo segnale ha più note simultanee - beh, questo è un problema difficile.
Se si desidera visualizzare un'analisi di frequenza dell'ingresso microfono live, consultare http://webaudiodemos.appspot.com/AudioRecorder/index.html (codice https://github.com/cwilso/AudioRecorder). Questo utilizza la FFT incorporata in RealtimeAnalyser per mostrare un grafico dello spettro di frequenza di un segnale audio dal vivo.
scrivo un semplice codice che si può mostrare la frequenza nella tua pagina web:
<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>
E script è
<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>
Buona fortuna.
Stavo cercando un esempio semplice come questo con barre, grazie! – Macumbaomuerte
Non ci posso credere, è perfetto! Grazie ! –