Saving WAV File Recorded in Chrome to Server

后端 未结 2 472
醉梦人生
醉梦人生 2020-11-29 10:07

I\'ve seen many partial answers to this here and elsewhere, but I am very much a novice coder and am hoping for a thorough solution. I have been able to set up recording aud

相关标签:
2条回答
  • 2020-11-29 10:10

    Client side JavaScript function to upload the WAV blob:

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

    after which you can play the file /tmp/uploaded_audio.wav.

    But remember! /tmp/uploaded_audio.wav was created by the user www-data, and (by PHP default) is not readable by the user. To automate adding the appropriate permissions, append the line

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

    to the end of the PHP (before the PHP end tag ?>).

    Hope this helps.

    0 讨论(0)
  • 2020-11-29 10:15

    Easiest way, if you just want to hack that code, is go in to recorderWorker.js, and hack the exportWAV() function to something like this:

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

    Then that method will save to server from inside the worker thread, rather than pushing it back to the main thread. (The complex Worker-based mechanism in RecorderJS is because a large encode should be done off-thread.)

    Really, ideally, you'd just use a MediaRecorder today, and let it do the encoding, but that's a whole 'nother ball of wax.

    0 讨论(0)
提交回复
热议问题