Einfacher Code zum Berechnen der Frequenz von Live Mic Audio mit WebAudio API

Ich habe eine Website, auf der ich die Frequenz des Live Mic Audio anzeigen muss. Ich habe eine this code, aber es ist extrem schwierig zu verstehen (Es verwendet Fourier-Transformation und alle). Bei einigen Untersuchungen habe ich von getByteFrequencyData(), die die Frequenz des Audios zurückgibt, kennen gelernt. Hat jemand es vorher mit Live Mic Audio bevorzugt in Web Audio API verwendet?Einfacher Code zum Berechnen der Frequenz von Live Mic Audio mit WebAudio API

Quelle

2014-04-16 FlyingAura

"Die Frequenz anzeigen" kann viele Dinge bedeuten. Tatsächlich verwendet meine PitchDetect-Demo KEINE Fourier-Transformation - sie verwendet Autokorrelation. Aber das wird Ihnen nur eine einzige Tonhöhe mit hoher Genauigkeit geben. Wenn Ihr Signal mehrere gleichzeitige Noten hat - das ist ein schweres Problem.

Wenn Sie eine Frequenzanalyse des Live-Mikrofoneingangs anzeigen möchten, lesen Sie http://webaudiodemos.appspot.com/AudioRecorder/index.html (Code unter https://github.com/cwilso/AudioRecorder). Das verwendet die integrierte FFT im RealtimeAnalyser, um ein Frequenzspektrum eines Live-Audiosignals anzuzeigen.

Quelle

2014-04-16 17:01:34 cwilso

Ich schreibe einen einfachen Code, den Sie Frequenz in Ihrer Webseite zeigen:

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

Und Skript ist

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

Viel Glück.

Quelle

2015-09-18 10:05:12

Ich suchte ein einfaches Beispiel wie dieses mit Bars, danke! – Macumbaomuerte

Ich kann es nicht glauben, es ist perfekt! Vielen Dank ! –

Einfacher Code zum Berechnen der Frequenz von Live Mic Audio mit WebAudio API

Antwort

Verwandte Themen