0

I have created a voice recorder in HTML. first, it will request stream, after allowing request stream it will show two buttons, like "start" and "Stop". After recording it will convert blob URL to base64 data.

Now what I want is, I have a table SQLserver I want to store base64 data in that table. I am creating this web page using ASP .NET MVC. The base64 data is in javascript. I don't know how to connect to the server.

Please help me.

Thanks.

Html Page code:

  <body>
  <h1> Audio Recorder</h1>
  <p> For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
  <div id='gUMArea'>
  <div>
  Record:
  </div>
  <button class="btn btn-default mediaAudio" id='gUMbtn'>Request Stream</button>
  </div>
  <div id='btns'>
  <button class="btn btn-default" id='start'>Start</button>
  <button class="btn btn-default" id='stop'>Stop</button>
  </div>
  <div>
  <ul class="list-unstyled" id='ul'></ul>
  </div>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="~/script.js"></script>
  </body>

JavaScript Code:

  'use strict'

  let log = console.log.bind(console),
  id = val => document.getElementById(val),
  ul = id('ul'),
  gUMbtn = id('gUMbtn'),
  start = id('start'),
  stop = id('stop'),
  stream,
  recorder,
  counter=1,
  chunks,
  media;


  gUMbtn.onclick = e => {
  let mv = id('.mediaAudio'),
  mediaOptions = {
  audio: {
  tag: 'audio',
  type: 'audio/mpeg',
  ext: '.mp3',
  gUM: {audio: true}
  }
  };
  media = mediaOptions.audio;
  navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
  stream = _stream;

  id('btns').style.display = 'inherit';
  start.removeAttribute('disabled');
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = e => {
  chunks.push(e.data);
  if (recorder.state == 'inactive') saveLink()
  };
  log('got media successfully');
  }).catch(log);
  }

  start.onclick = e => {
  start.disabled = true;
  stop.removeAttribute('disabled');
  chunks=[];
  recorder.start();
  }


  stop.onclick = e => {
  stop.disabled = true;
  recorder.stop();
  start.removeAttribute('disabled');
  }

  function saveLink() {

  let blob = new Blob(chunks, { type: media.type })
  ;
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function () {
  var base64data = reader.result;
  console.log(base64data.substr(base64data.indexOf(',') + 1));
  alert(base64data.substr(base64data.indexOf(',') + 1));
  }
  }

Now it have base64 data in base64data variable, I want to store this variable sql server.

Regards.

Mohammed Shiyas
  • 63
  • 1
  • 11

1 Answers1

0

Your solution has 2 parts:

  • Getting a blob out of the blob url

  • Sending that blob to the server

For first part you can use "Fake ajax" technique just pass blob url (url of download.ogg) as the url of your ajax

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        var result = this.response
    }
}
xhr.open('GET', 'blob:http://example.com/bbdaabf8-ddf2-40d3-975d-ade742417c71');
xhr.responseType = 'blob';
xhr.send();

After ajax completes result will hold a blob now you just send it to ther server using this answer

Community
  • 1
  • 1
Vinay
  • 7,442
  • 6
  • 25
  • 48