從 javascrit 到 python-django 的實時音頻流

Question

我想用javascript在瀏覽器中記錄客戶端的麥克風並實時發送它以在python中處理音頻流。 django 是否能夠實時執行此操作？

謝謝！

Answer 1

是的，您可以使用允許您使用麥克風並以*.wav,*.webm等格式提供blob 數據的javascript做到這一點，然后您需要使用 ajax 在 django 端發送響應我提供一個鏈接以允許您錄制音頻或視頻等

首先你會看到提及鏈接，然后是另一個它的例子

如果你使用 p5 js 是 posiable 和

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 示例
3. 保存音頻

如果您對我的回答滿意，請告訴我