Audiometer

Mit der JavaScript Audio-API wurde auch dieses Beispiel erstellt. Das Original stammt aus diesem Youtube-Video.

 

Code

 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
div#mp3_player
{
width:500px;
height:60px;
background:#000;
padding:5px;
margin: 50px auto;
}
div#mp3_player > div > audio
{
width:500px;
background: #000;
float: left;
}
div#mp3_player > canvas
{
width:500px;
height:30px;
background:#002d3c;
float: left;
}

</style>
<script>
//Audio-Objekt mit JavaScript erstellen
var audio=new Audio();
//Hier dann ein vorhandenes MP3-File einfügen.
audio.src="/tutorials/javascript/tellme.mp3";
audio.controls=true;
audio.loop=true;
audio.autoplay=false;

//globale Variablen
var canvas, ctx, analyser;

//Eventhandler
window.addEventListener("load",initMP3Player,false);

//Nach dem Laden der Seite initialisieren
function initMP3Player()
{
//Audioobjekt dem DIV audio_box hinzufügen
document.getElementById("audio_box").appendChild(audio);

//audiocontext als neues Objekt der Audio-API
var audiocontext=new AudioContext();
//The createAnalyser() method of the AudioContext interface creates an AnalyserNode, which can be used to expose
//audio time and frequency data and create data visualisations.
//https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createAnalyser
analyser=audiocontext.createAnalyser();

//Zeichenfläche
canvas=document.getElementById("analyser_render");
ctx=canvas.getContext('2d');
//Audiodaten von audio weitergeben
//https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource
var source=audiocontext.createMediaElementSource(audio);

//source an den analyser weiterleiten.
source.connect(analyser);
//analyser an die Ausgabe (Lautsprecher) weiterleiten.
analyser.connect(audiocontext.destination);
//Wiederholen und zeichnen
frameLooper();
}

function frameLooper()
{
//Bildsynchrone Wiederholung
window.requestAnimationFrame(frameLooper);
//Array für ganze Zahlen in der Größe der Datenzahl für die Visualisierung
//https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/frequencyBinCount
var fbc_array=new Uint8Array(analyser.frequencyBinCount);
//kopiert die Freuqenzdaten in ein Uint8-Array. Also die Lautstärkewerte an den jeweiligen Frequenzen.
//https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/frequencyBinCount
analyser.getByteFrequencyData(fbc_array);
//Canvas löschen
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='#0cf';
var bars=100, bar_x, bar_width=2, bar_height;
//Alle Datenwerte durchgehen
for(var i=0;i<bars;i++)
{
bar_x=i*3;
//Die Balkenhöhe ist abhängig von dem Lautstärkewert an dieser Frequenz.
bar_height=-fbc_array[i]/2;
//Rechteck zeichnen
ctx.fillRect(bar_x,canvas.height,bar_width,bar_height);
}
}
</script>
</head>
<body>
<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render"></canvas>
</div>
Nach dem Video: <a href="https://www.youtube.com/watch?v=IBHpSkGZtNM" target="_blank">https://www.youtube.com/watch?v=IBHpSkGZtNM</a>
<p></p>
Siehe auch: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API</a>
</body>
</html>