JavaScript到Django的实时音频流传输

Question

我想用JavaScript在浏览器中录制客户端的麦克风，并实时将其发送到Python中处理音频流。在Django中能否实现实时处理？

谢谢！

- Gonçalo Castel-Branco

Answer 1

你可以使用允许你使用javascript的麦克风，以*.wav,*.webm等格式的blob数据的形式录制音频，并通过ajax在django端发送响应。我提供一个链接，允许你录制音频或视频等。

首先你需要查看提到的链接，然后再看另一个例子。

如果你使用p5 js，那么这是可能的。

let mic, fft;
let recorder, soundFile;
let can1
function setup() {

  can1=createCanvas(400, 400);
  noFill();
  can1.parent('canvas-area');
  mic = new p5.AudioIn();
  mic.start();

  fft = new p5.FFT();
  fft.setInput(mic);
}

function draw() {
  background(255,255,255);
  let spectrum = fft.analyze();
  beginShape();
  for (i = 0; i < spectrum.length; i++) {
    ellipse(200,200,100+spectrum[i],100+spectrum[i]); 
  }
  endShape();
}


function mediaplay(){
  getAudioContext().resume();

  recorder = new p5.SoundRecorder();
  recorder.setInput(mic);
  soundFile = new p5.SoundFile();
  recorder.record(soundFile);
}

function mediastop(){

  recorder.stop();
  AjaxRequest()
  // saveSound(soundFile,'test.wav')
}

//do logic for send 1 half minute chunks or minute chucks
function AjaxRequest() {
    var form = new FormData();
    form.append("wavfile", soundFile.getBlob(), "file");

      $.ajax({
        url: "You url",
        method: "POST",
        data: form, //here passing the wav file 
        dataType: "json",
        processData: false,
        contentType:false,
        success:function(data){
             console.log(data.success)
          },

      });
}

@django view.py

import FileSystemStoragefrom django.http 
import JsonResponse,HttpResponsefrom django.views.decorators.csrf 
import csrf_exemptimport osos.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'
from django.core.files.storage import default_storageclass GetFile(View):

def get(self,request):   
    return JsonResponse(status=200,data={},safe=False)

# @csrf_exempt  
def post(self,request):  
    wavfile=request.FILES['wavfile']  
    #logic of your wav file what you want to do 
    return JsonResponse(status=200,data={'success':'success'},safe=False)  

这里提供一些链接

1. P5 js
2. P5 Example
3. 保存音频

如果您对我的回答感到满意，请告诉我。

- l.b.vasoya

---

这些链接中是否包含音频的实时流？blob-data没有给出相关信息。 - Jaromanda X

我该如何在Python中解码Blob？我收到了一个字节字符串（b'\x02\xb4\x...'），但我不知道如何将其转换为音频。 - Gonçalo Castel-Branco

首先，发送包含“blob数据”的wav文件，然后在Python端使用audiolab和scipy将这些wav文件合并成一个。 - l.b.vasoya

你能发一个例子吗？我使用以下代码创建了一个 Blob：const blob = new Blob(chunks, { 'type' : 'audio/wav; codecs=opus' })，并使用 sockets 发送了该 Blob：chatSocket.send(blob)。在 Python 中，我接收到了字节数据，但是找不到正确的方法将其转换为音频信号。 - Gonçalo Castel-Branco

我更新了我的回答，你能检查一下吗？ - l.b.vasoya