Question

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>

我想要做的是setInterval 40秒，它将缓冲40秒，就像录制将在40秒开始计时器将在40秒后运行它将显示播放按钮以检查录制的音频。我已经添加了示例截图

进度条将显示录音。同样会有一些音频问题我需要在音频完整播放后开始录音。如果有人知道这个问题的解决方案请帮助我。谢谢你的支持

Answer 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>

Answer 2

尝试使用：

.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;
    }

使用HTML代码：

<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>

在github链接中下载音频和计时器文件：

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

使用Jquery代码：

<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>

自动录制并允许使用JQuery播放一次

2 个答案: