FFT in Firefox - HTML5

[Bernhard _. (Firma: dl1bg) (bernhard_)]

Hallo zusammen,

in einem (privaten) Projekt habe ich ein Gerätchen als Webserver laufen, 
für den ich eine FFT brauche. Das ganze ist händisch in html und 
JavaScript geschrieben.
Dafür würde ich gerne nur die Rohdaten per LAN zum PC schicken (z.B. per 
AJAX) und die FFT auf dem PC berechnen lassen.

Bei meiner Recherche bin ich auf HTML5 bzw. die zugehörige Audio API 
gestoßen. Wenn ich
https://wiki.mozilla.org/Audio_Data_API
richtig verstehe, dann könnte ich der Funktion fft() einfach meine Daten 
übergeben und fertig.

Leider laufen in meinem Firefox 22 die gefundenen Beispiele nicht, mein 
"song.ogg" läuft zwar aber die FFT wird nicht dargestellt.

Laut
html5test.com
wird die Audio API noch nicht von FF22 und IE10 unterstützt.Ist das 
ganze wirklich noch experimentell und nicht wirklich einsetzbar oder 
liegt das nur an meiner Unkenntnis?


Habt ihr Erfahrungen mit HTML5 oder habt ihr eine FFT schon anders 
gelöst, z.B. in JavaScript?

Vielen Dank
Bernhard

[Tobi (Gast)]

https://wiki.mozilla.org/Audio_Data_API

Note: this API has been deprecated in favor of the Web Audio API chosen 
by the W3C.

[Läubi .. (laeubi)]

Bernhard __ schrieb:
> Dafür würde ich gerne nur die Rohdaten per LAN zum PC schicken
> (z.B. per AJAX) und die FFT auf dem PC berechnen lassen

Warum nicht auf dem µC?

Bernhard __ schrieb:
> Ist das ganze wirklich noch experimentell

HTML5 besteht aus Modulen, wo ggf. auch neue hinzukommen werden, es wird 
also eher kein HTML6 geben sondern einfach neue HTML5 Module, von denen 
dann mehr oder weniger von dem einzelnem Browser unterstützt werden.

Man muss also immer damit rechnen, dass auch wenn der Browser HTML5 
fähig ist, einzelne Module nicht zur Verfügung stehen.

Bernhard __ schrieb:
> JavaScript

http://kindohm.com/blog/2012/05/02/audiolibjs-fft.html

Bernhard __ schrieb:
> anders

Du könntest noch ein Java Applet (da gibt es auch eine JS Schnittstelle) 
o.ä. nutzen.

[Bernhard _. (Firma: dl1bg) (bernhard_)]

>> Warum nicht auf dem µC?
Es geht hier um einen AFU-Transceiver, der auch per Webbrowser gesteuert 
werden kann. Die API zum PC soll dem UI-Entwickler möglichst viele 
Freiheiten geben, deshalb möchte ich lieber die Rohdaten zum PC 
schicken.
Ob ich die Datenrate vernünftig stemmen kann, das muss sich aber noch 
zeigen.

>> HTML5 besteht aus Modulen, wo ggf. auch neue hinzukommen werden
Danke für die Erklärung, damit bleibt es bei JavaScript

>> http://kindohm.com/blog/2012/05/02/audiolibjs-fft.html
Auch wenn ich damit meine Unwissenheit verrate: wo steckt denn in der 
lib die Abtastrate? Ich kannte es bisher (Studium) so, dass ich einfach 
ein array von Messwerten und deren Abtastrate reingebe und ein array von 
Pegeln bei jeweils einer Frequenz herausbekomme.

Hier würde ich demnach tippen:
var ADCresult = Float32Array(2000);
var spectrum = Float32Array(2000);
var fft = new FFT.complex(2000, false);
fft.simple(spectrum , ADCresult , 'real');

Das Ergebnis sind dann 2000 Spektrallinien zwischen 0 Hz und 
1/Abtastrate?!?

Danke für die Nachhilfe, aber so einfache Fragen finde ich in den 
üblichen Quellen nicht erklärt.

Danke
Bernhard

[Läubi .. (laeubi)]

Sehe gerade das es wohl eine noch aktueller Version davon gibt hier:
https://github.com/jensnockert/fft.js

Bernhard __ schrieb:
> Hier würde ich demnach tippen

Eventuell hilft dir die Beispielseite:
https://github.com/jensnockert/fft.js/blob/master/test.html weiter?

Wenn du Firefox benutzt, kannst du dir auch FireBug installieren, und 
dann die Konsole öffnen, mittels console.log(spectrum) kannst du dir 
dann die genaue Struktur des Rückgabewertes ansehen.

[Bernhard _. (Firma: dl1bg) (bernhard_)]

Vielen Dank soweit, Läubi!

Im Wesentlichen funktioniert die lib wie erwartet, hier etwas Erklärung 
falls auch andere das nicht gleich verstehen...
In "ADCSamples" liegt ein Rechteck mit 1/4 der möglichen Frequenz bei 
dieser Auflösung. Die FFT liefert Real- und Imaginärteil zurück, und 
jeweils einen peak bei f/4 und 3f/4.

Eine Frage noch, vielleicht weiß das jemand: wie kann ich ein Int32Array 
per AJAX bzw. xmlhttp.responseText übergeben? Auf Serverseite (bei mir 
µC) ist das ja nur ein char*, im JavaScript bekomme ich einen String 
aber beim besten Willen kein array daraus.

Danke
Bernhard



var ADCSamples = new Float64Array(100);
var Spectrum = new Float64Array(200);
var SpectrumScale = 0;
var fft = new FFT.complex(100, false);

var count=0;
while(count < 100)
{
  ADCSamples[count++] = -1000;
  ADCSamples[count++] = -1000;
  ADCSamples[count++] = 1000;
  ADCSamples[count++] = 1000;
}

for(count=0;count<200;count++)
{
  if(SpectrumScale < Spectrum[count])
  {
    SpectrumScale = Spectrum[count];
  }
}

SpectrumScale = 100/SpectrumScale;


for(count=0;count<200;count+=2)
{          ctx.fillRect(count*3,100,3,Spectrum[count]*SpectrumScale + 
5);
}

[Markus B. (markusborti)]

Du könntest die Daten JSON codiert ausgeben.
Dieses kannst du dann ditekt in javascript einlesen.
Eine andere Möglichkeit wäre es, dass du das direkt als Javascript 
script ausgibst.

Sowas wie

<script...>
var x = New Array(1,2,3);
Function x(){...}
</script>

Dieses codesegment ist wohl synaktisch alles andere als korrekt.

ich Abt noch wage Erinnerungen, dass ich es mal so gemacht habe und es 
funktioniert hat..
Ich glaube es dann in den HTML-dom eingefügt zu haben und dann nachdem 
es eingefügt wurde, ausführbar war (bei mir war es glaube ich eine 
Funktion, die ich zurückgeben hab lassen).

Aber ganz sicher bin ich mir da jetzt nicht mehr.

Schöne Grüße

[Läubi .. (laeubi)]

Bernhard __ schrieb:
> Auf Serverseite (bei mir µC) ist das ja nur ein char*, im JavaScript
> bekomme ich einen String aber beim besten Willen kein array daraus

Ich sag mal "es kommt drauf an"... Wie sieht den der String aus? Wenn es 
z.B. so in der Art aussieht: 123.4,345.6,... könntest du über die 
Funktion split und parseFloat arbeiten.
Für komplexere Datenstrukturen bietet sich JSON und ein Framework wie 
JQuery an welches viele Probleme schon löst.