Saving WAV-Datei in Chrome auf Server

Question

Ich habe viele Teil Antworten hier und anderswo gesehen, aber ich bin sehr viel Anfänger Coder und hoffe auf eine gründliche Lösung. Ich war in der Lage, Tonaufnahme von einem Laptop-Mikrofon in Chrome Canary (v. 29.x) einzurichten und kann mit recorder.js relativ einfach eine .wav-Datei aufnehmen und lokal speichern, a la:

http://webaudiodemos.appspot.com/AudioRecorder/index.html

Aber ich muss in der Lage sein, die Datei auf einem Linux-Server zu speichern, den ich ausgeführt habe. Es ist das eigentliche Senden der aufgezeichneten Blob-Daten an den Server und das Speichern als eine .wav-Datei, die mich aufholt. Ich habe nicht das erforderliche PHP- und/oder AJAX-Wissen darüber, wie man das Blob in einer URL speichert und, wie mir gegeben wurde, mit Binaries unter Linux zu tun hat, die das Speichern dieser .wav-Datei wirklich schwierig machen. Ich würde alle Hinweise in die richtige Richtung begrüßen.

Answer 1

Client-Seite JavaScript-Funktion, die WAV Blob hochladen:

function upload(blob) { 
    var xhr=new XMLHttpRequest(); 
    xhr.onload=function(e) { 
     if(this.readyState === 4) { 
      console.log("Server returned: ",e.target.responseText); 
     } 
    }; 
    var fd=new FormData(); 
    fd.append("that_random_filename.wav",blob); 
    xhr.open("POST","<url>",true); 
    xhr.send(fd); 
} 

PHP-Datei upload_wav.php:

<?php 
// get the temporary name that PHP gave to the uploaded file 
$tmp_filename=$_FILES["that_random_filename.wav"]["tmp_name"]; 
// rename the temporary file (because PHP deletes the file as soon as it's done with it) 
rename($tmp_filename,"/tmp/uploaded_audio.wav"); 
?> 

nach dem Sie die Datei /tmp/uploaded_audio.wav spielen können.

Aber denken Sie daran! /tmp/uploaded_audio.wav wurde vom Benutzer www-data erstellt und ist (vom PHP-Standard) vom Benutzer nicht lesbar. So automatisieren Sie die entsprechenden Berechtigungen hinzufügen, fügen Sie die Zeile

chmod("/tmp/uploaded_audio.wav",0755); 

bis zum Ende des PHP (PHP vor dem End-Tag ?>).

Hoffe, das hilft.

Answer 2

Der einfachste Weg, wenn Sie nur diesen Code hacken wollen, ist zu recorderWorker.js hineingehen und hacken die exportWAV() Funktion, um etwas wie folgt aus:

function exportWAV(type){ 
    var bufferL = mergeBuffers(recBuffersL, recLength); 
    var bufferR = mergeBuffers(recBuffersR, recLength); 
    var interleaved = interleave(bufferL, bufferR); 
    var dataview = encodeWAV(interleaved); 
    var audioBlob = new Blob([dataview], { type: type }); 

    var xhr=new XMLHttpRequest(); 
    xhr.onload=function(e) { 
     if(this.readyState === 4) { 
      console.log("Server returned: ",e.target.responseText); 
     } 
    }; 
    var fd=new FormData(); 
    fd.append("that_random_filename.wav",audioBlob); 
    xhr.open("POST","<url>",true); 
    xhr.send(fd); 
} 

Dann wird das Verfahren zum Server speichern von innerhalb des Arbeiterfadens, anstatt ihn zurück zum Hauptfaden zu schieben. (Der komplexe Worker-basierte Mechanismus in RecorderJS ist, weil eine große Codierung sollte Off-Thread erfolgen.)

Wirklich, idealerweise würden Sie nur einen MediaRecorder heute verwenden, und lassen Sie es die Codierung tun, aber das ist ein Ganzes »Noch eine Kugel aus Wachs.