Real-time audio streaming from JavaScript to Django

Viewed 2104

I want to record client's microphone in the browser with JavaScript and send it in real-time to process the audio stream in Python. Can this be done with Django in real time?

Thank you!

1 Answers

Yes you can do that using the javascript that allow you to microphone and give blob data in form of *.wav,*.webm etc format then you need to send response on django side using ajax i give a link to allow you record audio or video etc

First you see mention link then another it example

if you use p5 js that be posiable and

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)  

Here i give link

  1. P5 js
  2. P5 Example
  3. Save Audio

If you satisfaction of my answer let me know

Related