Search code examples
javascriptpythondjangoblob

After transmitting an audio blob to the Django server, why is a .336Z file being saved in the database instead of a wav file?

I am developing a recording application using Recorder.js with Django. When the 'Upload' button is clicked, the audio blob is sent to the Django server and saved in the database. However, I am facing an issue where instead of saving the audio file in wav format, it is being saved as a .336Z file in the database. Why is it not possible to save the file in the wav format?

.336Z file

app.js

function createDownloadLink(blob) {
    
    var url = URL.createObjectURL(blob);
    var au = document.createElement('audio');
    var li = document.createElement('li');
    var link = document.createElement('a');

    //name of .wav file to use during upload and download (without extendion)
    var filename = new Date().toISOString();

    //add controls to the <audio> element
    au.controls = true;
    au.src = url;

    //save to disk link
    link.href = url;
    link.download = filename+".wav"; //download forces the browser to donwload the file using the  filename
    link.innerHTML = "Save to disk";

    //add the new audio element to li
    li.appendChild(au);
    
    //add the filename to the li
    li.appendChild(document.createTextNode(filename+".wav "))

    //add the save to disk link to li
    li.appendChild(link);
    
    //upload link
    var upload = document.createElement('a');
    upload.href="#";
    upload.innerHTML = "Upload";
    upload.addEventListener("click", function(event){
          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("audio_data",blob, filename.wav);
          xhr.open("POST","/save-audio/",true);
          xhr.send(fd);
    })
    li.appendChild(document.createTextNode (" "))//add a space in between
    li.appendChild(upload)//add the upload link to li

    //add the li element to the ol
    recordingsList.appendChild(li);
}

models.py

class Audio(models.Model):
    record= models.FileField(upload_to="media", null=True, blank=True)

views.py

@csrf_exempt
def save_audio(request):
    if request.method == 'POST':
        audio_file = request.FILES['audio_data']
        audio = Audio(record=audio_file)
        audio.save()
        return JsonResponse({'status': 'success'})
    else:
        return JsonResponse({'status': 'error'})
Solution

  • the issue is with this line

      fd.append("audio_data",blob, filename.wav);

    change it to

      fd.append("audio_data", blob, filename+".wav");

    That should work