Auto record and allow to play once using JQuery

问题

Hiii Everyone,

         Below is the sample code for record.

<html>
  <body>
    <audio controls autoplay></audio>

    <input onclick="startRecording()" type="button" value="start recording" />
    <input onclick="stopRecording()" type="button" value="stop recording and play" />

    <script>
      var onFail = function(e) {
        console.log('Rejected!', e);
      };

      var onSuccess = function(s) {
        stream = s;
      }

      window.URL = window.URL || window.webkitURL;
      navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

      var stream;
      var audio = document.querySelector('audio');

      function startRecording() {
        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true}, onSuccess, onFail);
        } else {
          console.log('navigator.getUserMedia not present');
        }
      }

      function stopRecording() {
        audio.src = window.URL.createObjectURL(stream);
      }
    </script>
  </body>
</html>

What I want to do is setInterval for 40 secs it will buffer for 40 secs like recording will start in 40secs timer will run after 40 secs it will show the play button to check audio recorded.Below I had added sample screenshots

Progress bar will show the recording..Similarly there will be some question with audio there I need to start recording once audio complete play.If anybody knows solution for this issue Please help me.Thanks for ur support

回答1:

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <style>
    .center_div {
      width: 500px;
      height: 100px;
      background-color: #f5f5f5;
      border: 1px solid #808080;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -250px;
      /* half width*/
      margin-top: -50px;
      /* half height*/
      padding: 25px;
    }

    .recording_label {
      display: block;
      text-align: center;
      padding: 10px;
      font-family: sans-serif;
      font-size: 1.1em;
      margin-bottom: 25px;
    }

    .loader_bg {
      min-width: 100%;
      background: #c5c5c5;
      min-height: 20px;
      display: block;
    }

    .loader_bg1 {
      min-width: 90%;
      background: grey;
      min-height: 20px;
      display: inline-block;
      position: relative;
      top: -20px;
    }
  </style>
</head>

<body>


  <audio controls autoplay></audio>

  <input onclick="startRecording();" type="button" value="start recording" />
  <input onclick="stopRecording();" type="button" value="stop recording and play" />


  <div class="center_div">
    <span class="recording_label">Please wait...</span>
    <span class="loader_bg"></span>
    <span class="loader_bg1"></span>



  </div>




  <script>
    var onFail = function(e) {
      console.log('Rejected!', e);
    };

    var onSuccess = function(s) {
      stream = s;
    }

    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var stream;
    var audio = document.querySelector('audio');

    function startRecording() {
      if (navigator.getUserMedia) {
        navigator.getUserMedia({
          audio: true
        }, onSuccess, onFail);
      } else {
        console.log('navigator.getUserMedia not present');
      }
    }

    function stopRecording() {
      audio.src = window.URL.createObjectURL(stream);
    }

    $(function() {
      var max = 40;
      var count = max + 1;
      var counter = setInterval(timer, 1000);

      function timer() {
        count = count - 1;
        if (count <= 0) {
          clearInterval(counter);
          $(".recording_label").html("Recording...");
          $('.loader_bg1').css({
            'min-width': '' + (100) + '%'
          })
          startRecording();
          recordingSec(40);
          return;
        }
        $(".recording_label").html("Recording will begin in " + count + " sec.");
        var percent = (count / max) * 100;
        $('.loader_bg1').css({
          'min-width': '' + (100 - percent) + '%'
        })
      }
    });



    function recordingSec(sec) {
      var count = sec + 1;
      var counter = setInterval(timer, 1000);

      function timer() {
        count = count - 1;
        if (count <= 0) {
          clearInterval(counter);
          $(".recording_label").html("Recording stopped...Playing");
          $('.loader_bg1').css({
            'min-width': '' + (100) + '%'
          })
          stopRecording();
          return;
        }
        $(".recording_label").html("Recording started [ " + (sec - count) + " / " + sec + " ] sec.");
        var percent = (count / sec) * 100;
        $('.loader_bg1').css({
          'min-width': '' + (100 - percent) + '%'
        })
      }
    }
  </script>
</body>

</html>

回答2:

Try To Use:

.btn-primary-success {
    color: #fff;
    background-color: #04b5e0;
    border-color: #04b5e0;
}

    .btn-primary-success:hover, .btn-primary-success:focus, .btn-primary-success:active, .btn-primary-success.active, .open .dropdown-toggle.btn-primary-success {
        color: #fff;
        background-color: #09a0c5;
        border-color: #09a0c5;
    }

Using Html Code:

<div style="text-align: left; padding: 10px;">
    <label style="margin-right: 10px; font-size: 14px !important;">Dictate Status</label>
    <a class="btn btn-primary-success pauseAudioDocWS pause" title="Pause" style="display: none; margin-right: 5px;"
        data-value="">
        <i class="imgpauseWS fa fa-lg fa-pause" style="cursor: pointer; margin: 2px 5px;"></i>
        <b class="ppauseWS btn-primary-success">Pause</b></a>
    <a class="btn btn-primary-success recordAudioDocWS inActiveWS" title="Start" style="margin-right: 20px;"
        data-value="">
        <b class="pplayWS">Click here to Start</b>
        <i class="imgplayWS fa fa-lg fa-microphone" style="cursor: pointer; margin: 2px 5px;"></i>
    </a>
    <span class="stopwatchWS" style="display: none; margin-right: 10px;">00:00:00</span>
</div>

Download Audio and Timer File in github links:

https://github.com/fezalhalai/AudioRecorder.js

Using Jquery Code:

<script src="../js/StopTimer.js"></script>
<script src="../js/jquery.timer.js"></script>
<script src="../js/AudioRecorder.js"></script>
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js" type="text/javascript"></script>
<script src="https://cdn.webrtc-experiment.com/gif-recorder.js" type="text/javascript"></script>
<script src="https://cdn.webrtc-experiment.com/gumadapter.js" type="text/javascript"></script>
<script src="https://cdn.webrtc-experiment.com/DetectRTC.js" type="text/javascript"> </script>

<script type="text/javascript">
 $(document).ready(function () {
     var oldRecorderWS;
     $('.recordAudioDocWS').click(function () {
         var $this = $(this);
         if (oldRecorderWS != undefined) {
             if (oldRecorderWS != document.tmId) {
                 alert('Dictating Already In Progress, Please Stop Previous Dictating To Continue');
                 return;
             }
         }

         var checkin_id = document.tmId;
         localStorage.setItem('checkin_id', checkin_id);
         localStorage.setItem('Tran_Type', 'W');

         oldRecorderWS = document.tmId;
         var roomId = document.tmId;
         localStorage.setItem('roomId', roomId);
         var isRecording = false;

         $(".isActiveWS").each(function () {
             if ($(this).hasClass('isActiveWS')) {
                 isRecording = true;
             }
         });


         if (isRecording == true) {
             document.isRecordActivityPerforms = true;
             if (confirm('Dictating in progress do you want to stop and save?')) {
                 oldRecorderWS = undefined;
                 $this.next('span').css('display', 'none');
                 Example1.resetStopwatch();
                 $('.stoprecmessage').css('display', 'block');
                 $(".isActiveWS").each(function () {
                     $(this).addClass('inActiveWS');
                     $(this).removeClass('isActiveWS');
                     $(this).find('.pplayWS').text('Click here to Start');
                     //$(this).find('.imgplay').attr('src', 'img/play.png');
                     $(this).find('.imgplayWS').addClass('fa-stop');
                     $(this).find('.imgplayWS').addClass('fa-microphone');
                     $(this).attr('title', 'Start');

                 });
                 //$('.tbothers').css('pointer-events', 'auto');
                 $('.btn-ws-next').removeAttr('disabled', '');
                 $('.btn-ws-prv').removeAttr('disabled', '');
                 $this.prev('a').css('display', 'none');
                 $this.prev('a').addClass('pause');
                 StartRecording();
                 document.isRecordActivityPerform = false;

                 //$this.next().next('img').removeClass('hidden');

                 if ($(CurruntAudioRecRow).parent().parent().find('.hdtmvid').val() == document.tmId) {
                     $(CurruntAudioRecRow).parent().parent().find('td .audioList').removeClass();
                     $(CurruntAudioRecRow).parent().parent().find('td .REC').removeClass('hidden');
                     $(CurruntAudioRecRow).parent().parent().find('td .PEN').addClass('hidden');
                 }

             }
         }
         else {
             $('.btn-ws-next').attr('disabled', 'disabled');
             $('.btn-ws-prv').attr('disabled', 'disabled');
             document.isRecordActivityPerform = true;
             $this.next('span').css('display', 'inline');
             $this.next().next('img').addClass('hidden');
             Example1.init($this.next('span'));
             Example1.resetStopwatch();
             Example1.Timer.toggle();
             $this.removeClass('inActiveWS');
             $this.addClass('isActiveWS');
             $this.find('.pplayWS').text('Stop');
             //$this.find('.imgplay').attr('src', 'img/stop.png');
             $this.find('.imgplayWS').removeClass('fa-microphone');
             $this.find('.imgplayWS').addClass('fa-stop');
             $this.attr('title', 'Stop');
             $this.prev('a').css('display', 'inline-table');
             StartRecording();
         }

     });

     $('.pauseAudioDocWS').click(function () {
         document.isRecordActivityPerform = true;
         var $this = $(this);
         Example1.Timer.toggle();
         var btnStartRecording = document.querySelector('#btn-start-recording');
         if ($(this).hasClass('pause')) {
             btnStartRecording.recordRTC.pauseRecording();
             recordingPlayer.pause();
             $(this).addClass('resume');
             $(this).removeClass('pause');
             $(this).find('.ppauseWS').text('Resume');
             //$(this).find('.imgpause').attr('src', 'img/play.png');
             $(this).find('.imgpauseWS').removeClass('fa-pause');
             $(this).find('.imgpauseWS').addClass('fa-microphone');
             $(this).attr('title', 'Resume');
             $(this).next('a').css('pointer-events', 'none');
             $(this).next('a').attr('disabled', 'disabled');
         }
         else if ($(this).hasClass('resume')) {
             btnStartRecording.recordRTC.resumeRecording();
             recordingPlayer.play();
             $(this).addClass('pause');
             $(this).removeClass('resume');
             $(this).find('.ppauseWS').text('Pause');
             //$(this).find('.imgpause').attr('src', 'img/pause.png');
             $(this).find('.imgpauseWS').removeClass('fa-microphone');
             $(this).find('.imgpauseWS').addClass('fa-pause');
             $(this).attr('title', 'Pause');
             $(this).next('a').css('pointer-events', 'auto');
             $(this).next('a').removeAttr('disabled');
         }
     });
 });
</script>

来源：https://stackoverflow.com/questions/42295781/auto-record-and-allow-to-play-once-using-jquery

标签

javascript

jquery

audio

record