javascript - html js voice recorder not working in django python implementation -

i have tried implement django application wherein user can record voice message pass ti watson api , receive transcribed data , show result user on separate page. recorder not working not able save file changes should made if want deploy application heroku , have voice recording saved there , pass audio file watson api?

code:

stt/stt/settings.py:

import os  # build paths inside project this: os.path.join(base_dir, ...) base_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))   # quick-start development settings - unsuitable production # see https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/  # security warning: keep secret key used in production secret! secret_key = 'my-secret-key'  # security warning: don't run debug turned on in production! debug = true  allowed_hosts = ['*']   # application definition  installed_apps = [     'django.contrib.admin',     'django.contrib.auth',     'django.contrib.contenttypes',     'django.contrib.sessions',     'django.contrib.messages',     'django.contrib.staticfiles',     'record', ]  middleware = [     'django.middleware.security.securitymiddleware',     'django.contrib.sessions.middleware.sessionmiddleware',     'django.middleware.common.commonmiddleware',     'django.middleware.csrf.csrfviewmiddleware',     'django.contrib.auth.middleware.authenticationmiddleware',     'django.contrib.messages.middleware.messagemiddleware',     'django.middleware.clickjacking.xframeoptionsmiddleware', ]  root_urlconf = 'stt.urls'  templates = [     {         'backend': 'django.template.backends.django.djangotemplates',         'dirs': [],         'app_dirs': true,         'options': {         'context_processors': [             'django.template.context_processors.debug',             'django.template.context_processors.request',             'django.contrib.auth.context_processors.auth',             'django.contrib.messages.context_processors.messages',         ],     }, }, ]  wsgi_application = 'stt.wsgi.application'   # database # https://docs.djangoproject.com/en/1.11/ref/settings/#databases  databases = {     'default': {         'engine': 'django.db.backends.sqlite3',         'name': os.path.join(base_dir, 'db.sqlite3'),     } }   # password validation # https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators  auth_password_validators = [ {     'name': 'django.contrib.auth.password_validation.userattributesimilarityvalidator', }, {     'name': 'django.contrib.auth.password_validation.minimumlengthvalidator', }, {     'name': 'django.contrib.auth.password_validation.commonpasswordvalidator', }, {     'name': 'django.contrib.auth.password_validation.numericpasswordvalidator', }, ]   # internationalization # https://docs.djangoproject.com/en/1.11/topics/i18n/  language_code = 'en-us'  time_zone = 'utc'  use_i18n = true  use_l10n = true  use_tz = true   # static files (css, javascript, images) # https://docs.djangoproject.com/en/1.11/howto/static-files/  static_url = '/static/'  template_dirs = ( os.path.join(base_dir,  'templates'), )  watson_username = 'watson-username' watson_password = 'watson-password' watson_endpoint = 'https://stream.watsonplatform.net/speech-to-text/api/v1/recognize' watson_default_params = { 'continuous': true, 'timestamps': true, 'word_confidence': true, } watson_default_headers = { 'content-type': 'audio/wav' } 

stt/stt/urls.py:

from django.conf.urls import include, url django.contrib import admin  urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^record/', include('record.urls')), ] 

stt/stt/wsgi.py:

import os  django.core.wsgi import get_wsgi_application  os.environ.setdefault("django_settings_module", "stt.settings")  application = get_wsgi_application() 

stt/record/static/record/img/mic128.png:image file

stt/record/static/record/img/save.svg:image file

stt/record/static/record/js/recorderjs/recorder.js:

(function(window){    var worker_path = 'js/recorderjs/recorderworker.js';    var recorder = function(source, cfg){     var config = cfg || {};     var bufferlen = config.bufferlen || 4096;     this.context = source.context;     if(!this.context.createscriptprocessor){        this.node = this.context.createjavascriptnode(bufferlen, 2, 2);     } else {        this.node = this.context.createscriptprocessor(bufferlen, 2, 2);     }      var worker = new worker(config.workerpath || worker_path);     worker.postmessage({       command: 'init',       config: {         samplerate: this.context.samplerate       }     });     var recording = false,       currcallback;      this.node.onaudioprocess = function(e){       if (!recording) return;       worker.postmessage({         command: 'record',         buffer: [           e.inputbuffer.getchanneldata(0),           e.inputbuffer.getchanneldata(1)         ]       });     }      this.configure = function(cfg){       (var prop in cfg){         if (cfg.hasownproperty(prop)){           config[prop] = cfg[prop];         }       }     }      this.record = function(){       recording = true;     }      this.stop = function(){       recording = false;     }      this.clear = function(){       worker.postmessage({ command: 'clear' });     }      this.getbuffers = function(cb) {       currcallback = cb || config.callback;       worker.postmessage({ command: 'getbuffers' })     }      this.exportwav = function(cb, type){       currcallback = cb || config.callback;       type = type || config.type || 'audio/wav';       if (!currcallback) throw new error('callback not set');       worker.postmessage({         command: 'exportwav',         type: type       });     }      this.exportmonowav = function(cb, type){       currcallback = cb || config.callback;       type = type || config.type || 'audio/wav';       if (!currcallback) throw new error('callback not set');       worker.postmessage({         command: 'exportmonowav',         type: type       });     }      worker.onmessage = function(e){       var blob = e.data;       currcallback(blob);     }      source.connect(this.node);     this.node.connect(this.context.destination);   // if script node not connected output "onaudioprocess" event not triggered in chrome.   };    recorder.setupdownload = function(blob, filename){     var url = (window.url || window.webkiturl).createobjecturl(blob);     var link = document.getelementbyid("save");     link.href = url;     link.download = filename || 'output.wav';   }    window.recorder = recorder;  })(window); 

stt/record/static/record/js/recorderjs/recorderworker.js:

  var reclength = 0,   recbuffersl = [],   recbuffersr = [],   samplerate;  this.onmessage = function(e){   switch(e.data.command){     case 'init':       init(e.data.config);       break;     case 'record':       record(e.data.buffer);       break;     case 'exportwav':       exportwav(e.data.type);       break;     case 'exportmonowav':       exportmonowav(e.data.type);       break;     case 'getbuffers':       getbuffers();       break;     case 'clear':       clear();       break;   } };  function init(config){   samplerate = config.samplerate; }  function record(inputbuffer){   recbuffersl.push(inputbuffer[0]);   recbuffersr.push(inputbuffer[1]);   reclength += inputbuffer[0].length; }  function exportwav(type){   var bufferl = mergebuffers(recbuffersl, reclength);   var bufferr = mergebuffers(recbuffersr, reclength);   var interleaved = interleave(bufferl, bufferr);   var dataview = encodewav(interleaved);   var audioblob = new blob([dataview], { type: type });    this.postmessage(audioblob); }  function exportmonowav(type){   var bufferl = mergebuffers(recbuffersl, reclength);   var dataview = encodewav(bufferl, true);   var audioblob = new blob([dataview], { type: type });    this.postmessage(audioblob); }  function getbuffers() {   var buffers = [];   buffers.push( mergebuffers(recbuffersl, reclength) );   buffers.push( mergebuffers(recbuffersr, reclength) );   this.postmessage(buffers); }  function clear(){   reclength = 0;   recbuffersl = [];   recbuffersr = []; }  function mergebuffers(recbuffers, reclength){   var result = new float32array(reclength);   var offset = 0;   (var = 0; < recbuffers.length; i++){     result.set(recbuffers[i], offset);     offset += recbuffers[i].length;   }   return result; }  function interleave(inputl, inputr){   var length = inputl.length + inputr.length;   var result = new float32array(length);    var index = 0,     inputindex = 0;    while (index < length){     result[index++] = inputl[inputindex];     result[index++] = inputr[inputindex];     inputindex++;   }   return result; }  function floatto16bitpcm(output, offset, input){   (var = 0; < input.length; i++, offset+=2){     var s = math.max(-1, math.min(1, input[i]));     output.setint16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);   } }  function writestring(view, offset, string){   (var = 0; < string.length; i++){     view.setuint8(offset + i, string.charcodeat(i));   } }  function encodewav(samples, mono){   var buffer = new arraybuffer(44 + samples.length * 2);   var view = new dataview(buffer);    /* riff identifier */   writestring(view, 0, 'riff');   /* file length */   view.setuint32(4, 32 + samples.length * 2, true);   /* riff type */   writestring(view, 8, 'wave');   /* format chunk identifier */   writestring(view, 12, 'fmt ');   /* format chunk length */   view.setuint32(16, 16, true);   /* sample format (raw) */   view.setuint16(20, 1, true);   /* channel count */   view.setuint16(22, mono?1:2, true);   /* sample rate */   view.setuint32(24, samplerate, true);   /* byte rate (sample rate * block align) */   view.setuint32(28, samplerate * 4, true);   /* block align (channel count * bytes per sample) */   view.setuint16(32, 4, true);   /* bits per sample */   view.setuint16(34, 16, true);   /* data chunk identifier */   writestring(view, 36, 'data');   /* data chunk length */   view.setuint32(40, samples.length * 2, true);    floatto16bitpcm(view, 44, samples);    return view; } 

stt/record/static/record/js/audiodisplay.js:

    function drawbuffer( width, height, context, data ) {     var step = math.ceil( data.length / width );     var amp = height / 2;     context.fillstyle = "silver";     context.clearrect(0,0,width,height);     for(var i=0; < width; i++){         var min = 1.0;         var max = -1.0;         (j=0; j<step; j++) {             var datum = data[(i*step)+j];             if (datum < min)                 min = datum;             if (datum > max)                 max = datum;         }         context.fillrect(i,(1+min)*amp,1,math.max(1,(max-min)*amp));     } } 

stt/record/static/record/js/main.js:

window.audiocontext = window.audiocontext || window.webkitaudiocontext;  var audiocontext = new audiocontext(); var audioinput = null,     realaudioinput = null,     inputpoint = null,     audiorecorder = null; var rafid = null; var analysercontext = null; var canvaswidth, canvasheight; var recindex = 0;  /* todo:  - offer mono option - "monitor input" switch */  function saveaudio() {     audiorecorder.exportwav( doneencoding );     // mono instead saying     // audiorecorder.exportmonowav( doneencoding ); }  function gotbuffers( buffers ) {     var canvas = document.getelementbyid( "wavedisplay" );      drawbuffer( canvas.width, canvas.height, canvas.getcontext('2d'), buffers[0] );      // time gotbuffers called right after new recording completed -     // here's should set download.     audiorecorder.exportwav( doneencoding ); }  function doneencoding( blob ) {     recorder.setupdownload( blob, "myrecording" + ((recindex<10)?"0":"") + recindex + ".wav" );     recindex++; }  function togglerecording( e ) {     if (e.classlist.contains("recording")) {         // stop recording         audiorecorder.stop();         e.classlist.remove("recording");         audiorecorder.getbuffers( gotbuffers );     } else {         // start recording         if (!audiorecorder)             return;         e.classlist.add("recording");         audiorecorder.clear();         audiorecorder.record();     } }  function converttomono( input ) {     var splitter = audiocontext.createchannelsplitter(2);     var merger = audiocontext.createchannelmerger(2);      input.connect( splitter );     splitter.connect( merger, 0, 0 );     splitter.connect( merger, 0, 1 );     return merger; }  function cancelanalyserupdates() {     window.cancelanimationframe( rafid );     rafid = null; }  function updateanalysers(time) {     if (!analysercontext) {         var canvas = document.getelementbyid("analyser");         canvaswidth = canvas.width;         canvasheight = canvas.height;         analysercontext = canvas.getcontext('2d');     }      // analyzer draw code here     {         var spacing = 3;         var bar_width = 1;         var numbars = math.round(canvaswidth / spacing);         var freqbytedata = new uint8array(analysernode.frequencybincount);          analysernode.getbytefrequencydata(freqbytedata);          analysercontext.clearrect(0, 0, canvaswidth, canvasheight);         analysercontext.fillstyle = '#f6d565';         analysercontext.linecap = 'round';         var multiplier = analysernode.frequencybincount / numbars;          // draw rectangle each frequency bin.         (var = 0; < numbars; ++i) {             var magnitude = 0;             var offset = math.floor( * multiplier );             // gotta sum/average block, or miss narrow-bandwidth spikes             (var j = 0; j< multiplier; j++)                 magnitude += freqbytedata[offset + j];             magnitude = magnitude / multiplier;             var magnitude2 = freqbytedata[i * multiplier];             analysercontext.fillstyle = "hsl( " + math.round((i*360)/numbars) + ", 100%, 50%)";             analysercontext.fillrect(i * spacing, canvasheight, bar_width, -magnitude);         }     }      rafid = window.requestanimationframe( updateanalysers ); }  function togglemono() {     if (audioinput != realaudioinput) {         audioinput.disconnect();         realaudioinput.disconnect();         audioinput = realaudioinput;     } else {         realaudioinput.disconnect();         audioinput = converttomono( realaudioinput );     }      audioinput.connect(inputpoint); }  function gotstream(stream) {     inputpoint = audiocontext.creategain();      // create audionode stream.     realaudioinput = audiocontext.createmediastreamsource(stream);     audioinput = realaudioinput;     audioinput.connect(inputpoint);  //    audioinput = converttomono( input );      analysernode = audiocontext.createanalyser();     analysernode.fftsize = 2048;     inputpoint.connect( analysernode );      audiorecorder = new recorder( inputpoint );      zerogain = audiocontext.creategain();     zerogain.gain.value = 0.0;     inputpoint.connect( zerogain );     zerogain.connect( audiocontext.destination );     updateanalysers(); }  function initaudio() {         if (!navigator.getusermedia)             navigator.getusermedia = navigator.webkitgetusermedia || navigator.mozgetusermedia;         if (!navigator.cancelanimationframe)             navigator.cancelanimationframe = navigator.webkitcancelanimationframe || navigator.mozcancelanimationframe;         if (!navigator.requestanimationframe)             navigator.requestanimationframe = navigator.webkitrequestanimationframe || navigator.mozrequestanimationframe;      navigator.getusermedia(         {             "audio": {                 "mandatory": {                     "googechocancellation": "false",                     "googautogaincontrol": "false",                     "goognoisesuppression": "false",                     "googhighpassfilter": "false"                 },                 "optional": []             }         }, gotstream, function(e) {             alert('error getting audio');             console.log(e);         }); }  window.addeventlistener('load', initaudio ); 

stt/record/static/record/style.css:

html { overflow: hidden; } body {     font: 14pt arial, sans-serif;     background: lightgrey;     display: flex;     flex-direction: column;     height: 100vh;     width: 100%;     margin: 0 0; } canvas {     display: inline-block;     background: #202020;     width: 95%;     height: 45%;     box-shadow: 0 0 10px blue; } #controls {     display: flex;     flex-direction: row;     align-items: center;     justify-content: space-around;     height: 20%;     width: 100%; } #record { height: 15vh; } #record.recording {     background: red; } #save, #save img { height: 10vh; } #save { opacity: 0.25;} #save[download] { opacity: 1;} #viz {     height: 80%;     width: 100%;     display: flex;     flex-direction: column;     justify-content: space-around;     align-items: center; } @media (orientation: landscape) {     body { flex-direction: row;}     #controls { flex-direction: column; height: 100%; width: 10%;}     #viz { height: 100%; width: 90%;} } 

stt/record/templates/record/index.html:

{% load static %} <!doctype html> <html> <head>     <meta name="viewport" content="width=device-width,initial-scale=1">     <title>audio recorder</title>     <link rel="stylesheet" href="{% static 'record/style.css' %}"/>     <script src="{% static 'record/js/audiodisplay.js' %}"></script>     <script src="{% static 'record/js/recorderjs/recorder.js' %}"></script>     <script src="{% static 'record/js/main.js' %}"></script>  </head> <body>     <div id="viz">         <canvas id="analyser" width="1024" height="500"></canvas>         <canvas id="wavedisplay" width="1024" height="500"></canvas>     </div>     <div id="controls">         <img id="record" src="{% static 'record/img/mic128.png' %}" onclick="togglerecording(this);">         <a id="save" href="#"><img src="{% static 'record/img/save.svg' %}"></a>     </div> </body> </html> 

stt/record/apps.py:

from django.apps import appconfig   class recordconfig(appconfig):     name = 'record' 

stt/record/urls.py:

from django.conf.urls import url  . import views  urlpatterns = [     url(r'^$', views.index, name='index'), ] 

stt/record/views.py:

from django.shortcuts import render pydub import audiosegment glob import glob math import ceil os.path import basename, splitext, exists import json import requests import csv stt.settings import watson_username, watson_password, watson_endpoint, watson_default_params, \     watson_default_headers   def index(request):     if request.method == 'get':         return render(request, 'record/index.html')  # post  # via: http://www.propublica.org/podcast/item/how-a-reporter-pierced-the-hype-behind-theranos/ download_url = 'https://api.soundcloud.com/tracks/247345268/download?client_id=cua40o3jg3emvp6tv4u6ymyyo50nugpj' audio_filename = 'podcast.mp3' audio_segment_seconds = 300  if not exists(audio_filename):     print("downloading from", download_url)     resp = requests.get(download_url)      open(audio_filename, 'wb') w:         w.write(resp.content)         print("wrote audio file to", audio_filename)      # convert wav     audio = audiosegment.from_mp3(audio_filename)     xs = 0     while xs < audio.duration_seconds:         ys = min(xs + audio_segment_seconds, ceil(audio.duration_seconds))         fname = str(xs).rjust(5, '0') + '-' + str(ys).rjust(5, '0') + '.wav'         audio[xs * 1000:ys * 1000].export(fname, format='wav')         print("saved", fname)         xs = ys   # transcribe each wav watson fname in glob("*.wav"):     # download watson's response     tname = splitext(basename(fname))[0] + '.json'     if exists(tname):         print("already transcribed", tname)     else:         print("transcribing", fname)         open(fname, 'rb') r:             watson_response = requests.post(                 watson_endpoint,                 data=r,                 auth=(watson_username, watson_password),                 params=watson_default_params,                 headers=watson_default_headers,                 stream=false             )             open(tname, 'w') w:                 w.write(watson_response.text)                 print("wrote transcript to", tname)   # print out raw transcript , word csv rawfile = open("raw.txt", "w") wordsfile = open("words.csv", "w") csvfile = csv.writer(wordsfile) csvfile.writerow(['word', 'confidence', 'start', 'end'])  fname in sorted(glob("*.json")):     open(fname, 'r') f:         results = json.load(f)['results']         linenum, result in enumerate(results):  # each result  line             if result.get('alternatives'):  # each result may have many alternatives                 # pick best alternative                 lineobj = result.get('alternatives')[0]                 # rawfile.writeline(lineobj['transcript'])                 word_timestamps = lineobj['timestamps']                 if word_timestamps:                     rawfile.write(lineobj['transcript'] + "\n")                      word_confidences = lineobj['word_confidence']                     idx, wordts in enumerate(word_timestamps):                         txt, tstart, tend = wordts                         confidence = round(100 * word_confidences[idx][1])                         csvfile.writerow([txt, confidence, tstart, tend])  rawfile.close() wordsfile.close() 

in views.py file need able print rawfile text onto new html result page should open after user has recorded message , uploaded watson.