Javascript Frequenzanalysator mit Diagramm-Bibliothek

Ich versuche derzeit, einen Frequenzanalysator mit Web-Technologien, insbesondere Meteor.Javascript Frequenzanalysator mit Diagramm-Bibliothek

Im Moment habe ich versucht, die Google Charts-Bibliothek zu verwenden, die SVG-Bilder erstellt. Das Diagramm muss etwa 10 Mal pro Sekunde aktualisiert werden und die Leistung ist nicht zufriedenstellend. Es benötigt die gesamte CPU-Ressource.

Ich bin ein bisschen neu in der Web-Entwicklung (vor allem in Grafik und Performances), also wenn Sie in die richtige Richtung zeigen könnten, um meine Forschung zu machen, würde ich es begrüßen.

Quelle

2015-11-05 c.censier

Ich landete der Bibliothek CanvasJs up verwendet, die eine der am schnellsten zu sein scheint. Es gibt eine Option interactivityEnabled: false, um Interaktionen mit dem Diagramm zu deaktivieren, die die Leistung erhöhen.

Auch wenn es noch keine direkte Meteor-Integration gibt, legen Sie einfach die js-Datei in die ./client/compatibility und es funktioniert gut.

Quelle

2016-04-29 07:07:08

Verwenden Sie das Zeichenelement. Sie sollten in der Lage sein, 60 pro Sekunde zu erhalten, und wenn es eine Audioquelle ist, stellt die Audio-API einen DSP für die Spektralanalyse bereit.

Hier ist ein Beispiel audio spectrum visualizer

Quelle

2015-11-05 15:31:44 Blindman67

Der Analysator ist nicht für Audioquellen, aber danke, ich werde in diese Richtung schauen. –

Audioquellen müssen nicht Audio sein, aber Sie sind auf die Arten von Transformationen beschränkt, die Sie anwenden können. – Blindman67

Ich glaube nicht, dass ich die Audio-API verwenden kann, ich werde Rohdaten anzeigen, die von einem Radioanalysator stammen. –

Sie könnten sehr leicht diese mit ZingChart erreichen. Wir haben (noch) keine Meteor-Integration, aber die folgende Demo sollte ein guter Anfang für Sie sein. Führen Sie das folgende Snippet aus, um es live zu sehen.

Ich bin im ZingChart Team! Lass es mich wissen, falls du fragen hast.

var MAXVALUES = 100; 
 
var myConfig = { 
 
type: "line", 
 
series : [ 
 
    { 
 
    values : [] 
 
    } 
 
] 
 
}; 
 

 
zingchart.render({ 
 
    id : 'myChart', 
 
    data : myConfig, 
 
    height: 400, 
 
    width: 600 
 
}); 
 

 

 
var myValues = []; 
 

 
setInterval(function(){ 
 
    myValues.push(Math.floor(Math.random() * 10)); 
 
    
 
    if(myValues.length == MAXVALUES+1){ 
 
    myValues.shift(); 
 
    } 
 
    console.log(myValues) 
 
    zingchart.exec('myChart', 'setseriesvalues', { 
 
    values : [myValues] 
 
    }) 
 
},60)

<script src="http://cdn.zingchart.com/zingchart.min.js"></script> 
 
<div id='myChart'></div>

Quelle

2015-11-06 18:55:11 RockinSocks

Javascript Frequenzanalysator mit Diagramm-Bibliothek

Antwort

Verwandte Themen