Django 录音问题：收到 Bad Request 错误

Question

我是 Django 的新手，也是我第一次构建应用程序。我正在使用 Django 构建一个音频日志应用程序。我在这里做的是一个录音机。当用户按下录音机按钮时，它会指向 record.html 四个按钮，开始、暂停、恢复和停止。当用户完成录音并点击停止按钮时，它将保存一个音频文件 (wav)。但是，我收到了错误的请求错误。

代码：

views.py

@login_required  
def record_audio(request):
  print("11",request.method)
  print("1")
  if request.method == 'POST':
    print("2")
    if 'blob' not in request.POST:
      print(request.POST)
      print("3")
      return HttpResponseBadRequest('Missing audio-blob parameter')

    print("4")
    now = datetime.now().strftime("%Y-%m-%d_%H-%M-%S")
    print("5")
    filename = f"{request.user.username}_{now}.wav"
    print("6")
    file_path = os.path.join(settings.MEDIA_ROOT, filename)

    # Save the audio file to the server
    print("7")
    with open(file_path, 'wb') as f:
        f.write(request.POST['blob'].encode())

    return HttpResponse(status=204)  # Return a 204 No Content response
else:
    print("8")
    return render(request, 'recording/record.html')

record.html

{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>Recorder</h1>

<section class="experiment" >
  <br>
  <h3>
    Send Message: Speech to text
  </h3>
  <button id="start-recording">Start</button>
  <button id="pause-recording" disabled>Pause</button>
  <button id="resume-recording" disabled>Resume</button>
  <button id="stop-recording" disabled>Stop</button>
</section>

<section class="experiment">
    <div id="audios-container"></div>
</section> 

{% include "chat_script.html" %}
<script src="https://cdn.WebRTC-Experiment.com/MediaStreamRecorder.js"></script>
<script src="{% static 'js/jquery-1.12.3.js' %}"></script>
<!-- <script src="{% static 'js/bootstrap.min.js' %}"></script>  -->
<!-- <script src="{% static 'js/script.js' %}"></script>  -->

  <!-- <div>
    <audio id="audio-player" controls></audio>
  </div> -->

{% endblock %}

urls.py

path('record-audio/',views.record_audio,name="record_audio"),

chat_script.html

<script>
    function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
        navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
    }

var mediaConstraints = {
    audio: true
};

document.querySelector('#start-recording').onclick = function() {
    this.disabled = true;
    captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
};

document.querySelector('#stop-recording').onclick = function() {
    this.disabled = true;
    mediaRecorder.stop();
    mediaRecorder.stream.stop();

    while (audiosContainer.firstChild) {
        audiosContainer.removeChild(audiosContainer.firstChild);
    }

    document.querySelector('#pause-recording').disabled = true;
    document.querySelector('#start-recording').disabled = false;
};

document.querySelector('#pause-recording').onclick = function() {
    this.disabled = true;
    mediaRecorder.pause();

    document.querySelector('#resume-recording').disabled = false;
};

document.querySelector('#resume-recording').onclick = function() {
    this.disabled = true;
    mediaRecorder.resume();

    document.querySelector('#pause-recording').disabled = false;
};

// {#document.querySelector('#save-recording').onclick = function() {#}
// {#    this.disabled = true;#}
// {#    mediaRecorder.save();#}
// {##}
// {#    // alert('Drop WebM file on Chrome or Firefox. Both can play entire file. VLC player or other players may not work.');#}
// {#};#}

var mediaRecorder;

function onMediaSuccess(stream) {
    var audio = document.createElement('audio');

    audio = mergeProps(audio, {
        controls: true,
        muted: true
    });
    audio.srcObject = stream;
    audio.play();

    audiosContainer.appendChild(audio);
    audiosContainer.appendChild(document.createElement('hr'));

    mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.stream = stream;


    mediaRecorder.recorderType = StereoAudioRecorder;
    mediaRecorder.mimeType = 'audio/wav';


    // don't force any mimeType; use above "recorderType" instead.
    // mediaRecorder.mimeType = 'audio/webm'; // audio/ogg or audio/wav or audio/webm

    mediaRecorder.audioChannels = true;
    mediaRecorder.ondataavailable = function(blob) {
        var a = document.createElement('a');
        a.target = '_blank';
        a.innerHTML = 'Open Recorded Audio No. ' + (index++) + ' (Size: ' + bytesToSize(blob.size) + ') Time Length: ' + getTimeLength(timeInterval);

        a.href = URL.createObjectURL(blob);

        // {#audiosContainer.appendChild(a);#}
        // {#audiosContainer.appendChild(document.createElement('hr'));#}

         function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie != '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        // Does this cookie string begin with the name we want?
                        if (cookie.substring(0, name.length + 1) == (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }

            var csrftoken = getCookie('csrftoken');
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/record-audio/', true);
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
            xhr.setRequestHeader("MyCustomHeader", "Put anything you need in here, like an ID");
            xhr.send(blob);
    };

    var timeInterval = 10000;
    if (timeInterval) timeInterval = parseInt(timeInterval);
    else timeInterval = 5 * 1000;

    // get blob after specific time interval
    mediaRecorder.start(timeInterval);

    document.querySelector('#stop-recording').disabled = false;
    document.querySelector('#pause-recording').disabled = false;
    document.querySelector('#save-recording').disabled = false;
}

function onMediaError(e) {
    console.error('media error', e);
}

var audiosContainer = document.getElementById('audios-container');
var index = 1;

function bytesToSize(bytes) {
    var k = 1000;
    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    if (bytes === 0) return '0 Bytes';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}

function getTimeLength(milliseconds) {
    var data = new Date(milliseconds);
    return data.getUTCHours() + " hours, " + data.getUTCMinutes() + " minutes and " + data.getUTCSeconds() + " second(s)";
}

window.onbeforeunload = function() {
    document.querySelector('#start-recording').disabled = false;
};

window.useThisGithubPath = 'streamproc/MediaStreamRecorder';

`

**chat_script.html 代码来自：https://github.com/ehtisham91/Django-Speech-to-text-Chat **

我尝试在 views.py 的 record_audio 函数中添加一些打印语句。它给了我这个：

11 获取

1

8

[27/Mar/2023 16:12:23] "GET /record-audio/ HTTP/1.1" 200 13124

11 获取

1

8

[27/Mar/2023 16:12:39] "GET /record-audio/ HTTP/1.1" 200 13115

11 后

1

2

3

错误请求：/record-audio/

[27/Mar/2023 16:12:42] “POST /record-audio/ HTTP/1.1” 400 28

我想弄明白，但还是没修好。

Answer 1

你在后端等待一个名为 blob 的参数。

    var csrftoken = getCookie('csrftoken');
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/record-audio/', true);
    xhr.setRequestHeader("X-CSRFToken", csrftoken);
    xhr.setRequestHeader("MyCustomHeader", "Put anything you need in here, like an ID");
    xhr.send('blob='+blob);