Zapisywanie pliku WAV zapisanego w Chrome na serwerze

Question

Widziałem wiele częściowych odpowiedzi na to tutaj i gdzie indziej, ale jestem bardzo początkującym programistą i mam nadzieję na dokładne rozwiązanie. Mogłem skonfigurować nagrywanie dźwięku z mikrofonu laptopa w Chrome Canary (wer. 29.x) i można, przy użyciu recorder.js, stosunkowo łatwo skonfigurować nagrywanie pliku .wav i zapisać go lokalnie, a la:

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

Ale muszę mieć możliwość zapisania pliku na uruchomionym serwerze Linux. Jest to faktyczne wysłanie zarejestrowanych danych BLOB do serwera i zapisanie go jako pliku .wav, który mnie łapie. Nie mam wymaganej wiedzy z zakresu PHP i/lub AJAX na temat zapisywania kropli na adres URL i radzenia sobie, jak mi to uświadomiono, z binariami na Linuksie, które sprawiają, że zapisywanie tego pliku .wav jest naprawdę trudne. Z ogromnym zadowoleniem przyjmuję wszelkie wskazówki we właściwym kierunku.

Answer 1

po stronie klienta JavaScript, aby przesłać funkcja blob WAV:

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 plik 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"); 
?> 

po którym można odtworzyć plik /tmp/uploaded_audio.wav.

Ale pamiętaj! /tmp/uploaded_audio.wav został stworzony przez użytkownika www-data, a (według domyślnej wartości PHP) nie jest możliwy do odczytania przez użytkownika. Aby zautomatyzować dodawanie odpowiednich uprawnień, dołącz linię

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

do końca PHP (przed końcem znacznika PHP ?>).

Mam nadzieję, że to pomoże.

Answer 2

Najprostszym sposobem, jeśli chcesz po prostu włamać tego kodu, to udać się do recorderWorker.js i siekać funkcję exportWAV(), aby coś takiego:

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); 
} 

Wtedy ta metoda pozwoli zaoszczędzić na serwerze z wewnątrz wątku roboczego, zamiast przesuwać go z powrotem do głównego wątku. (Złożony mechanizm oparty na robotach w RecorderJS polega na tym, że duże kodowanie powinno być wykonywane poza wątkiem.)

Naprawdę, najlepiej, gdybyś użył MediaRecorder dzisiaj i niech to zrobi kodowanie, ale to wszystko "Północna kula wosku.