Неправильно работает событие onclick

280
07 июля 2017, 08:04

Добрый день, при нажатии на кнопку onclick='audioRecorder.open(this) спрашивает разрешение на микрофон и при нажатии на разрешить запись сразу стартует, при этом когда нажимаешь виднеется мельком кнопка (в виде rec) как сделать чтобы при нажатии спрашивало разрешение и после нажатия на другую кнопку допустим (rec) запись уже стартовала

var audioRecorder = {}; 
audioRecorder.secondsToTime = function(v, b) { 
  var r, h = 0, 
    m = 0, 
    s = 0; 
  if (v >= 3600) { 
    h = Math.floor(v / 3600 % 24); 
  } 
  if (v >= 60) { 
    m = Math.floor(v / 60 % 60); 
  } 
  s = Math.floor(v % 60); 
  if (s < 10) { 
    s = '0' + s; 
  } 
  if (h > 0 && m < 10) { 
    m = '0' + m; 
  } 
  r = m + ':' + s; 
  if (b || h > 0) { 
    r = h + ':' + r; 
  } 
  return r; 
}; 
audioRecorder.time = function(o, e) { 
  var parent = $(o).parents('.audioRecorder'); 
  var slider = parent.find('.progressWrapper'); 
  var sliderW = slider.width(); 
  var duration = audioRecorder.player.duration; 
  var x = e.clientX - slider[0].getBoundingClientRect().left; 
  var ct = (x * duration) / sliderW; 
  audioRecorder.player.currentTime = ct; 
}; 
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() { 
 
  }); 
}; 
audioRecorder.send = function(el) { 
  var post_id = $(el).attr('post-id'); 
  var user_id = $(el).attr('user-id'); 
  var page_id = $(el).attr('page-id'); 
  var audioRecorderElem = $(el).parents('.audioRecorder'); 
  var reader = new FileReader(); 
  reader.onloadend = function() { 
    var base64 = reader.result; 
 
 
    //здесь посылаешь base64 на сервер 
 
    $.post("file.php", { 
      "audio": base64 
    }, function(data) { 
      console.log(data); 
      console.log('stop'); 
      var text = '[audio records/' + data + '.wav]'; 
      ///alert(text); 
      var esc = $.Event("keyup", { 
        keyCode: 13 
      }); 
      esc.keyCode = 13; 
      esc.shiftKey = 0; 
 
      Wo_RegisterCommentClick(text, post_id, user_id, page_id); 
    }); 
 
  }; 
  reader.readAsDataURL(audioRecorder.blob); 
}; 
 
 
var audioPlayer = {}; 
audioPlayer.play = function(el) { 
  var playerParent = $(el).parents('.audioPlayer'); 
  var player = playerParent.find('audio'); 
  var progressWrapper = playerParent.find('.progressWrapper'); 
  var seekBar = playerParent.find('.seekBar'); 
  var progressBar = playerParent.find('.progressBar'); 
  var currentElem = playerParent.find('.current'); 
  var durationElem = playerParent.find('.duration'); 
  if (!el.h1) { 
    player[0].addEventListener('timeupdate', function() { 
      var duration = player[0].duration; 
      var w = progressWrapper.css('width'); 
      var current = player[0].currentTime; 
      var r = (current * 100) / duration; 
      progressBar.css({ 
        'width': r + '%' 
      }); 
      if (duration) { 
        var b = false; 
        if ((duration / 3600) >= 1) { 
          b = true; 
        } 
        var time = audioPlayer.secondsToTime(current, b); 
        currentElem.html(time); 
        durationElem.html(audioPlayer.secondsToTime(duration, b)); 
      } 
      if (duration == current) { 
        playerParent.attr({ 
          'status': 'pause' 
        }); 
      } 
    }); 
    el.h1 = 1; 
    player[0].src = playerParent.attr('src'); 
    player[0].volume = 0.7; 
  } 
  if (player[0].paused) { 
    player[0].play(); 
    playerParent.attr({ 
      'status': 'play' 
    }); 
  } else { 
    player[0].pause(); 
    playerParent.attr({ 
      'status': 'pause' 
    }); 
  } 
}; 
audioPlayer.stop = function(el) { 
  var playerParent = $(el).parents('.audioPlayer'); 
  var player = playerParent.find('audio'); 
  player[0].pause(); 
  player[0].currentTime = 0; 
  playerParent.attr({ 
    'status': 'stop' 
  }); 
}; 
audioPlayer.time = function(el, e) { 
  var playerParent = $(el).parents('.audioPlayer'); 
  var player = playerParent.find('audio'); 
  var slider = playerParent.find('.progressWrapper'); 
  var sliderW = slider.width(); 
  var duration = player[0].duration; 
  var x = e.clientX - slider[0].getBoundingClientRect().left; 
  var ct = (x * duration) / sliderW; 
  player[0].currentTime = ct; 
}; 
audioPlayer.volume = function(el, e) { 
  var playerParent = $(el).parents('.audioPlayer'); 
  var player = playerParent.find('audio'); 
  var slider = playerParent.find('.volumeWrapper'); 
  var volumeBar = playerParent.find('.volumeBar'); 
  var sliderW = slider.width(); 
  var x = e.clientX - slider[0].getBoundingClientRect().left; 
  var r = (x * 100) / sliderW; 
  var v = Math.floor(r); 
  player[0].volume = (v / 100); 
  volumeBar.css({ 
    'width': r + '%' 
  }); 
}; 
audioPlayer.secondsToTime = function(v, b) { 
  var r, h = 0, 
    m = 0, 
    s = 0; 
  if (v >= 3600) { 
    h = Math.floor(v / 3600 % 24); 
  } 
  if (v >= 60) { 
    m = Math.floor(v / 60 % 60); 
  } 
  s = Math.floor(v % 60); 
  if (s < 10) { 
    s = '0' + s; 
  } 
  if (h > 0 && m < 10) { 
    m = '0' + m; 
  } 
  r = m + ':' + s; 
  if (b || h > 0) { 
    r = h + ':' + r; 
  } 
  return r; 
}; 
/***/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<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>

READ ALSO
this в unit тестах jasmine

this в unit тестах jasmine

Как в тестах Jasmine подменить созданному объекту другой this?

209
jQuery AJAX запись в константу [требует правки]

jQuery AJAX запись в константу [требует правки]

Как после выполнения ajax, записать данные в константу и все это выполнить до функции ajaxStop?

259
Работа с датой и временем

Работа с датой и временем

По окончанию регистрации пользователю даётся 24 часа, чтобы активировать аккаунт, в противном случае он удаляется

257
заполнить pdf при помощи формы на сайте?

заполнить pdf при помощи формы на сайте?

Реализовывал ли кто-то создание PDF файлов с данными пользователя, которые тот указал в форме на сайте? Те Пользователь оставил данные - под...

280