Сюжет аудио с микрофона в Джанго

Question

Я хочу периодически записывать 5 секунд аудио, а затем отправлять его в виде большого двоичного объекта через ajax на сервер и, наконец, отображать звуковой сигнал.

Я использую функцию ниже для записи и отправкиаудио на сервер:

function start_microphone(){
    var options = {mimeType: 'audio/webm'};
    const recorder = new MediaRecorder(audioStream, options);
    const chunks = [];
    recorder.ondataavailable = function(e) {
        chunks.push(e.data);
    }
    recorder.onstop = function(e) {
        var data = new FormData();
        data.append('file', new Blob(chunks));
        $.ajax({
          url :  'ajax/analyze_audio/',
          type: 'POST',
          data: data,
          contentType: false,
          processData: false,
          success: function(data) {
            console.log("boa!");
          },    
          error: function() {
            console.log("not so boa!");
          }
        });
        setTimeout(start_microphone, 0);
    }
    setTimeout(()=> recorder.stop(), 5000); // we'll have a 5s media file
    recorder.start();
}

Затем, с помощью python, я пытаюсь прочитать его и построить его:

def analyze_audio(request):
    audio = request.FILES['file']
    readaudio = audio.read()
    path = default_storage.save('somename.webm', ContentFile(readaudio))
    data = np.fromfile(path, dtype=np.int16)
    os.remove(path)
    save(data, "foo.png")
    return JsonResponse({})

def save(data, name):
    if os.path.exists(name):
        os.remove(name)
    fig = plt.figure(frameon=False, figsize=(100, 128), dpi=1)
    ax = plt.Axes(fig, [0., 0., 1., 1.])
    ax.set_axis_off()
    ax.margins(0)
    fig.add_axes(ax)
    ax.plot(data, "k")
    fig.canvas.draw()
    plt.savefig(name)

Я сохраняю аудио в файл "somename.webm"просто чтобы убедиться, что звук хорошо принят и звучит так, как должен.И если я воспроизведу этот файл, звук, который я записал, звучит нормально.Однако сюжет "foo.png" просто не имеет смысла и выглядит так: