Recording doesn't start right?

Question

JavaScript

Good afternoon, when you click on the onclick='audioRecorder.open(this) button, it asks for permission to the microphone and when you click on allow recording, it immediately starts, and when you click, you can see a glimpse of the button (in the form of rec) how to make it ask for permission when you click it and after pressing another button let's say (rec) the recording has already started

<div class='audioRecorder' status=''>
          <i style="font-size: 20px;
    margin-left: 5px;
    color: #9d9d9d;"class="material-icons" onclick='audioRecorder.open(this);' >mic</i>
          <audio></audio>
          <div class='controlPanelWrapper'>
            <table cellpadding='0' cellspacing='0' class='controlPanel'>
              <tr>
                <td class='mainbtnContainer'><div class='mainbtn' onclick='audioRecorder.start(this);'></div></td>
                <td class='progressContainer'>
                  <div class='progressBlock'><div class='progressWrapper' onclick='audioRecorder.time(this,event);'><div class='progressBar'></div></div></div>
                </td>
                <td class='durationContainer'><div class='duration'>0:00</div></td>
                <td class='resetContainer' onclick='audioRecorder.reset(this);'><div class='reset'></div></td>              
                <td class='sendContainer' onclick='audioRecorder.send(this);' post-id="<?php echo $wo['story']['id']; ?>" user-id="<?php echo $wo['story']['publisher']['user_id']; ?>" page-id="<?php echo (!empty($wo['story']['publisher']['page_id'])) ? $wo['story']['publisher']['page_id'] : '0'; ?>"><div class='send'></div></td>
              </tr>
            </table>
          </div>

JS

audioRecorder.start=function(el){
  var audioRecorderElem=$(el).parents('.audioRecorder');
  var status=audioRecorderElem.attr('status');
  if(status=='record'){
    audioRecorder.stop(el);		
  }
  else if(status=='stop'){
    audioRecorder.play(el);	
  }
  else if(status=='pause'){
    audioRecorder.play(el);
  }
  else if(status=='play'){	
    audioRecorder.pause(el);
  }
  else{
    audioRecorder.record(el);
  }
};
audioRecorder.record=function(el){
  var audioRecorderElem=$(el).parents('.audioRecorder');
  try{
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia;
    window.URL=window.URL||window.webkitURL;
    audioRecorder.context=new AudioContext;
  }catch(e){
    alert('Ваш браузер не поддерживает веб аудио!');
    return false;
  }
  navigator.getUserMedia({audio:1},function(stream){
    audioRecorder.localStream=stream;
    var input=audioRecorder.context.createMediaStreamSource(stream);
    audioRecorder.recorder=new Recorder(input);
    audioRecorder.recorder.record();
    audioRecorder.startRecordTime(el);
    audioRecorderElem.attr({'status':'record'});
  },function(err){});	
};
audioRecorder.stop=function(el){
  var audioRecorderElem=$(el).parents('.audioRecorder');
  audioRecorderElem.attr({'status':'stop'});
  audioRecorder.recorder.stop();
  audioRecorder.stopRecordTime(el);
  audioRecorder.recorder.exportWAV(function(blob) {
    audioRecorder.blob=blob;
    var url=URL.createObjectURL(blob);
    audioRecorder.player=audioRecorderElem.find('audio')[0];
      audioRecorder.player.addEventListener('timeupdate',function(){
      var duration=audioRecorder.player.duration;
      var current=audioRecorder.player.currentTime;
      var r=(current*100)/duration;
      $('.audioRecorder .progressBar').css({'width':r+'%'});
      time=audioRecorder.secondsToTime(current);
      $('.audioRecorder .duration').text(time);
      if(duration==current){
        $('.audioRecorder').attr({'status':'stop'});
      }
    });				
    audioRecorder.player.src=url;
    audioRecorder.recorder.clear();
    audioRecorder.removeMicrophone();
  });	
};
audioRecorder.play=function(el){
  var audioRecorderElem=$(el).parents('.audioRecorder');
  audioRecorder.player.play();
  audioRecorderElem.attr({'status':'play'});	
};
audioRecorder.pause=function(el){
  var audioRecorderElem=$(el).parents('.audioRecorder');
  audioRecorder.player.pause();
  audioRecorderElem.attr({'status':'pause'});		
};
audioRecorder.startRecordTime=function(el){
  var audioRecorderElem=$(el).parents('.audioRecorder');
  var durElem=audioRecorderElem.find('.duration');
  var ft=new Date().getTime();
  audioRecorder.idInt=setInterval(function(){
    var current=Math.floor((new Date().getTime()-ft)/1000);
    if(current>=15){audioRecorder.stop(el);audioRecorder.stopRecordTime();}
    var time=audioRecorder.secondsToTime(current);
    durElem.text(time);
  },500);

};
audioRecorder.stopRecordTime=function(el){
  clearInterval(audioRecorder.idInt);
};
audioRecorder.removeMicrophone=function(){
  try{
    audioRecorder.localStream.getTracks()[0].stop();
  }catch(e){}
};
audioRecorder.reset=function(el){
  var audioRecorderElem=$(el).parents('.audioRecorder');
  audioRecorder.removeMicrophone();
  audioRecorder.stopRecordTime();
  audioRecorderElem.removeAttr('status');
  if(audioRecorder.player){
    audioRecorder.player.currentTime=0;
    audioRecorder.player.src='';
  }
  audioRecorderElem.find('.progressBar').css({'width':'0%'});
  audioRecorder.hide(el);
  try{audioRecorder.recorder.clear();}catch(e){}
};
audioRecorder.open=function(el){
 var audioRecorderElem=$(el).parents('.audioRecorder');
 audioRecorderElem.find('.controlPanelWrapper').show(400,function(){
  audioRecorder.record(el);
 });
};
audioRecorder.hide=function(el){
  var audioRecorderElem=$(el).parents('.audioRecorder');
  audioRecorderElem.find('.controlPanelWrapper').hide(400,function(){
    
  });
};