Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 23
  1. #1
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    Problem mit Web Audio API, Ton hackt und kratzt

    Hallo, ich bin neu hier und das ist jetzt schon das dritte Forum wo ich mich anmelde, weil das Project was ich vorhabe doch etwas umfangreicher ist als ich gedacht habe.
    Mein Vorhaben ist ein Wasserfall Spektrum im Browser dazustellen, aber die Audiodaten kommen nicht über xhr2 sondern über eine WebSocket Verbindung als live stream.

    Übertragen werden Rohe PCM Daten, diese kommen von einer GStreamer Pipeline, ein NodeJS Skript setzt die TCP Daten in eine Websocket Verbindung um.

    Die GStreamer pipeline:
    gst-launch audiotestsrc freq=1500 ! audioconvert ! audio/x-raw-int,rate=44100,channels=1,width=16,depth=16,endianness=1234,signed=true ! tcpclientsink port=5000

    Das NodeJs Script:
    Code:
    var net = require('net');
    var socketServer = new(require('ws').Server)({port: 3000});
    
    function ToArraybuffer(buffer){
    	var ab = new ArrayBuffer(buffer.length);
    	var view = new Uint8Array(ab);
    	for(var i=0; i< buffer.length; i++){
    		view[i] = buffer[i];
    	}
    	socketServer.broadcast(ab, {binary:true});
    	//console.log(ab);
    }
    
    socketServer.on('connection', function(socket){
    	console.log('WsClient connected');
    	socket.on('close', function(code, messege){
    		console.log('Disconnected WebSocket (' + socketServer.clients.length+' total)' );
    	});
    });
    
    socketServer.broadcast = function(data, opts){
    	for( var i in this.clients){
    		this.clients[i].send(data, opts);
    	}
    };
    
    var Server = net.createServer(function(s){
    	console.log('server connected');
    	s.on('data', function(TCPData){
    		//socketServer.broadcast(msg, {binary:true});
    		//console.log(msg);
    		ToArraybuffer(TCPData)
    		
            });
    	
    });
    Server.listen(5000);
    
    console.log('Server started at port 3000');

    Und das Problem, das Client Skript:
    Code:
      if (! window.AudioContext) {
            if (! window.webkitAudioContext) {
                alert('no audiocontext found');
            }
            window.AudioContext = window.webkitAudioContext;
        }
    	
        var audioContext = new AudioContext();
    	
    //var AudioStart =0;
    
    function playPcmChunk(data){
    
        var source = audioContext.createBufferSource();
    
        var audio=new Float32Array(data);
    
        var audioBuffer = audioContext.createBuffer(1, audio.length , 44100);
    
        audioBuffer.getChannelData(0).set(audio);
    
        source.buffer = audioBuffer;
    	
    	source.connect(audioContext.destination);
    
        source.start(AudioStart);
    	
        //AudioStart += audioBuffer.duration;
    }
    
    var context = new webkitAudioContext();
     var ws = new WebSocket('ws://192.168.2.104:3000');
          ws.binaryType = 'arraybuffer';
          ws.onmessage = function(b) {
    		   playPcmChunk(b.data)
     }
    Problem ist das der Ton alle Millisekunden hackt, kratzt und irgendwann meldet der Computer das der Browser nicht mehr regiert.


    Man müsste jetzt irgendwie eine Buffer Programiren der sich füllt und dann an die web Audio Sache übergeben wird,
    in der Zeit wird ein 2ter Buffer gefüllt und wenn der erste leer ist wird der 2 an die web audio Schnittstelle gesendet usw..

    Hat da irgendwer ein Plan von??

    Es gibt ein Skript von der Uni Twente wo so was schon mal gemacht wird, (http://dm4tr.bplaced.net/websdr/websdr-sound.js)
    allerdings auf einer Bandbreite von 30Mhz, in diesem Skript wird also immer wider auf das Hörbare Spektrum des Menschen runter gemischt.
    Das brauch ich nicht, ich hatte gedacht damit mein Problem zu lösen aber das Skript sieht für mich aus wie ein Strickmuster.

    Link zum WebSdr der Uni Twente http://websdr.ewi.utwente.nl:8901/ da auf html5 umstellen.

    Danke im Voraus, xorg1990

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    ich habe mir das gerade erst angesehen, kann also nur vermuten, aber ich würde im 1. versuch einfach eine ScriptProcessorNode hinter die AudioBufferSourceNode schalten.

  3. #3
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Mit den ScriptProcessor habe ich da so meine Problemchen, ich verstehe den Wertegang nicht so recht von der Methode.
    Den ScriptProcessor muss man ja mit onaudioprocess verbinden und genau da hackt’s wie muss der Syntax aussehen?
    Code:
    var ScriptProcessor = audioContext.createScriptProcessor(1024, 1, 1);
    ScriptProcessor.onaudioprocess = function (e) {
      var output = e.outputBuffer.getChannelData(0);
      var input = e.inputBuffer.getChennelData.(0).set(audio);
    
    //und dann sicherlich eine for schleife aber wie aussehen??
    };
    ScriptProcessor.connect(context.destination);
    Habe vorher nur DOM und Jquery gemacht, mit der WebAudio Sache wollte ich mal was neues Probieren.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Warum willst du unbedingt PCM-Rohdaten streamen? Es gibt doch gute Komprimierungsverfahren, die auch streamkompatibel sind.

    PS: was ist genau ein "Wasserfall Spektrum"? Das Audiospektrum eines Wasserfalls? Das Lichtspektrum des gebrochenen Lichts durch einen Wasserfall? In beiden Fällen: warum brauchst du dafür Livedaten?

  5. #5
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Ich möchte in JavaScript ein wenig Digital Signal Processing machen, dazu gehört auch ein Wasserfall Spektrum,
    was nix anderes ist als ein FFT Spektrum ins Zeitliche versetzt.
    Frequenzspektrum

    Das Spektrum in Browser ist schon gelöst:
    Exploring the HTML5 Web Audio: visualizing sound | Smartjava.org


    Warum PCM-Rohdaten?
    Ganz einfach warum sollte ich in mp3 oder Vorbis encodieren wenn im Browser mit decodeAudioData() auch nur die Rohen PCM Daten herausgepickt werden.
    Man könnte mit IceCast/ShoutCast einen Server aufsetzen aber dann ist wider das Problem das man mit der Web Audio API nicht an den Stream ran kommt.

    PS: Ich bin ganz Ohr vor besser Vorschläge.
    Geändert von xorg1990 (20-12-2013 um 18:31 Uhr)

  6. #6
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Zitat Zitat von xorg1990 Beitrag anzeigen
    Den ScriptProcessor muss man ja mit onaudioprocess verbinden und genau da hackt’s wie muss der Syntax aussehen?
    onaudioprocess ist ein eventhandler. dort musst du die inputdaten in die outputdaten kopieren
    Code:
    var input = e.inputBuffer.getChannelData(0);
    var output = e.outputBuffer.getChannelData(0);
    for (var i = 0; i < input.length; i++)
    {
      output[i] = input[i];
    }
    verbinden musst du noch zusätzlich zu
    ScriptProcessor.connect(context.destination);
    die BufferSource-Node mit der ScriptProcessor-Node

  7. #7
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Ich fresse gleich meine Tastatur auf … es will mir nicht gelingen.

    Habe es jetzt so gemacht:
    Code:
    function playPcmChunk(data){
    
        var source = audioContext.createBufferSource();
    
        var ScriptProcessor = audioContext.createScriptProcessor(1024, 1, 1);
    	
        var audio=new Float32Array(data);
    
        var audioBuffer = audioContext.createBuffer(1, audio.length , 44100);
    		
         ScriptProcessor.onaudioprocess = function (e) {
    		var input = audioBuffer.getChannelData(0).set(audio);
    		var len = audio.length;
    		//console.log(len);
      		var output = e.outputBuffer.getChannelData(0);
      		for (var i = 0; i <len; i++) {
        	           output[i] = input[i];
                     }
         };
    
    source.connect(ScriptProcessor);
    ScriptProcessor.connect(audioContext.destination);
    }
    Da kommt dieser fehler:
    Fehler.png

    Wenn ich e.inputBuffer.getChannelData(0).set(audio);
    schreibe geht’s auch nicht.

    Irgendwie will’s nicht so recht in meinen Kopf.

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Zitat Zitat von xorg1990 Beitrag anzeigen
    Ich möchte in JavaScript ein wenig Digital Signal Processing machen, dazu gehört auch ein Wasserfall Spektrum,
    was nix anderes ist als ein FFT Spektrum ins Zeitliche versetzt.
    Frequenzspektrum
    Was ein Frequenzspektrum ist, weiß ich. Aber der Begriff "Wasserfall Spektrum" sagt mir gar nichts... oder meinst du ein Spektrogramm?

    Und wenn du ein Spektrogramm machen willst - warum brauchst du dann Livedaten? Hol' dir doch zuerst die Daten komplett vom Server und arbeite dann weiter... dann hast du auch kein Problem, wenn die Neztwerkverbindung mal nicht so schnell ist.

  9. #9
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Ok ich muss da anscheinend doch weiter ausholen.
    Ich bin im Bereich Amateurfunk tätig und möchte Normal CW(Morsecode) im Browser live Rendern.
    Dazu benötiget eben ein solches Wasserfall Diagramm Spectrum Displays.

    Hören soll man die WC Signale auch noch.
    So sieht das in Aktion aus: SDR Waterfall CW end of 40m - YouTube

    Livedaten sind deshalb nötig, weil der jenige der in den USA auf seinen Taster drückt, der will ja auch wissen wie lange sein Signal brauch bis nach Deutschland.

    Ich habe in der Gstreamer Pipeline auch schon ein Lame Encoder und ein Vobis Encoder dazwischen gehangen aber dann steh ich Clientseitig auch wieder auf den Schlauch.
    Die Methode decodeAudioData() mag keinen live stream.

    Habe bei Stackoverflow das hier gefunden PCM Web Audio Api Javascript - Stack Overflow
    allerdings kenne ich die Sache mit dem FileReader nicht. Und Übrhaubt was soll das: var normalizedSample= (sample > 0) ? sample / 32768 : sample / -32768;??

    Irgendwo habe ich gelesen das die Web Audio API nur ein float32array kennt mit eine Wertebereich von -1 bis + 1, kann das aber nicht mehr finden. Eventuell ist das, dass Problem.

    Mfg xorg1990

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Ah... so langsam verstehe ich, was du machen willst.

    Aber der Audiostream ist ja artifiziell. Ich denke, es wäre einfacher, das Audio im Browser zu erzeugen (also ich würde einen Sinus nehmen und dessen Amplitude dann über die Amplitude der Funkfrequenz, die man gerade betrachtet, zu modulieren).
    Somit musst du nur die Frequenzdaten, die du ja sowieso im Spektrogramm darstellen willst, übertragen. Dadurch wird die benötigte Bandbreite kleiner.

    Da ich aber mit dem AudioContext selbst noch nichts gemacht habe, kann ich dir da konkret leider nicht helfen. Vielleicht hab' ich nach den Feiertagen mal Zeit, mir das anzusehen.

    PS: so wirklich live werden die Daten nie werden, da du ja die Funkwellen erst bei dir verarbeiten und dann durch das Internet zurückschicken musst. Diese Zusatzzeit sollte größer sein als die Signalzeit des Funksignals.

  11. #11
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Oha ich hätte nicht gedacht, dass auf diesen Beitrag noch jemand antwortet.
    Ein frohes Fest an alle, die heute noch hier drauf gucken.

    @kkapsnerr, irgendwie verstehe ich nicht was du willst, warum ist der Audiostream artifiziell??

    Habe jetzt mal ein kleines Schema gemalt, vielleicht hilft das zu Verständlichkeit.
    TCPtoWS.png

    In der Web Audio API steht bei Punk 4.9:
    Format is non-interleaved IEEE 32-bit linear PCM with a nominal range of -1 -> +1. It can contain one or more channels.
    Das was die GStreamer-Pipline bringt ist aber S16LE PCM. Man müsste jetzt das Format nach float32 bringen, aber da reichen meine Informatikkenntnisse nicht aus.
    Was man über die WEB socket Verbindung überträgt ist doch erst mal egal. Oder?


    Es gibt da ein NodeJS Modul das macht genau das was ich suche aber das lässt sich nicht installieren.
    https://github.com/xdissent/node-pcm-utils.

    Dann gibt es noch das Modul alsa
    https://github.com/xdissent/node-alsa
    Da steht unten im Bespiel:
    Downsample audio captured from an ALSA device to a sample rate of 11025, in mono, encoded to 32 bit float PCM data and output to stdout.
    Alles schön und gut nur verstehe ich die Syntax nicht, ist das überhaupt JavaScript?

    Man könnte auch auf den Server ein Lame Encoder laufen lassen, diesen gibt es auch in NodeJS, aber ob das jetzt die Lösung ist...nee

    PS. Das das mit dem Server4you ist nur ein Beispiel, wir haben bei uns im Club jemanden der regelt das.

  12. #12
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Mir ist gerade eingefallen GStreamer kann doch auch float32 senden, es mit keine ruhe gelassen das gleich auszuprobieren.
    Kein Erfolg der Ton klingt wie ein Fernschreiber auf crack. Jetzt bin ich ratlos.

  13. #13
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Hallo ein frohes neues Jahr noch.

    Ich habe das Problem gelöst, der Fehler war das ich Serverseitig ein Arraybuffer erstellt habe, was überhaut nicht notwendig war.
    Wenn man jetzt mit GStreamer float32samples (F32LE) sendet kommt der Ton auch an.
    Allerdings will der Analyser jetzt nicht, das Array ist immer leer bzw. der Inhalt ist immer 0.
    0error.png

    Code:
    //setup Nodes	
    var audioContext = new AudioContext();
    var analyser;
    var source
    var AudioStart =0;
    function playPcmChunk(data){
    	//setup Analyser
    	analyser = audioContext.createAnalyser();
    	analyser.smoothingTimeConstant = 0;
    	analyser.fftSize =1024;
    	analyser.connect(audioContext.destination);
    	
    	//play the input stream float32saples as arraybuffer
            source = audioContext.createBufferSource();
            var audio=new Float32Array(data);
            var audioBuffer = audioContext.createBuffer(1, audio.length , 96000);
    	for(var b=0;b<audio.length;b++){
        	      audioBuffer.getChannelData(0).set(audio);
    	}
           source.buffer = audioBuffer;
    	
    	//source.connect(audioContext.destination);
            source.start(AudioStart);
            AudioStart += audioBuffer.duration;
    	
    	//connect the source with analyser
    	source.connect(analyser);
    	
    	//store analyser data in bytearray
    	var array = new Uint8Array(analyser.frequencyBinCount);
    	analyser.getByteFrequencyData(array);
    	console.log(array);
    }

    Die Frage ist jetzt, brauche ich den Analyser überhaut noch??
    Da ich ja schon FloatSamples streame brauch ja nix analysiert werden, wie komme ich aber dennoch zu meinem fft Spektrum??

  14. #14
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Schön, dass der Ton jetzt funktioniert.

    Kannst du mal einen Testlink machen, wo wir uns das live ansehen können.

    PS: Natürlich brauchst du den Analyser, wenn du das Frequenzspektrum des Audiosignals sehen willst.
    Wenn du das Spektrum des Funksignals sehen willst, kannst du das natürlich nicht aus dem Audiosignal auslesen (da das Funksignal ja die Trägerwelle für das Audiosignal ist und in einem komplett anderen Frequenzbereich arbeitet...). In diesem Fall musst du die Fouriertransformation auf dem Server machen und dessen Ergebnis per Websocket an den Client schicken.

  15. #15
    Avatar von xorg1990
    xorg1990 ist offline König
    registriert
    19-12-2013
    Beiträge
    872

    AW: Problem mit Web Audio API, Ton hackt und kratzt

    Hi kkapsner, das mit dem ins Netz stellen wird jetzt auf die schnelle nix, da ich die Ports von meiner Workstation nicht geöffnet kriege,
    habe das schon mal durch.
    Außerdem ist das Nodejs Skript noch instabil, mal läuft es Stunden lang und mal sagt es „Stream is not Writable…Error“, neustarten kann dann nur ich.

    Aber eigentlich hast du alles was du bauchst, das Nodejs Skript ist das vom ersten Posting nur das du halt die Function ToArraybuffer(TCPData) auslöschen kannst, das Browser Skript ist das gestrige.

    Die GStreamer pipeline ist folgende (Weißes Rauschen):
    gst-launch-1.0 audiotestsrc wave=white-noise ! audioconvert ! audio/x-raw, rate=96000, channels=1, format=F32LE, signed=true ! tcpclientsink host=192.168.2.104 port=5000
    Achtung es ist eine GStremer 1.0ver. oder besser nötig, da sonst problem mit Float32Samples!
    Gstremer und NodeJs laufen auf derselben Maschine.

    PS: das die Soundkarte das RF Signal nicht kennt das weiß ich selber, deshalb habe ich ja einen Empfänger gebaut der das Signal auf 12-19kHz Runtermischt.
    Das ist ja das Nächte das Spektrum brauch nur eine Bandbreite von 12-19kHz… aber erstmal überhaut ein Spektrum wär schon geil.

    Ach fast vergessen, die Fourier-Transformation Serverseitig geht natürlich nicht dann bräuchte ich ja wider 2 WebSocket Verbindungen eine für den Ton eine für‘n Herrn Fourier.
    Was man aber machen könnte die Bandbreite auf die 7kHz beschränken.

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. mehrere audio auf einmal
    Von baum94 im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 12-02-2012, 19:07
  2. audio datei
    Von baum94 im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 12-02-2012, 13:08
  3. One Button Audio Player; Audioplay Problem
    Von Philidor im Forum Flash
    Antworten: 1
    Letzter Beitrag: 07-03-2011, 17:43
  4. Audio aufnehmen
    Von soad im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 11-07-2006, 01:24
  5. audio preload
    Von 8ball im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 25-05-2005, 00:37

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •