自动记录，并允许使用JQuery

HIII每个人都玩一次，自动记录，并允许使用JQuery

  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秒将运行它会显示播放按钮，检查音频recorded.Below我又增加了样品截图

进度条会显示recording..Similarly会有音频存在一些问题，我需要开始play.If有人知道这个问题的解决方案，请帮助me.Thanks乌拉圭回合支持

来源

2017-02-17 Kavya Shree

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

来源

2017-02-18 06:43:15

显示一次记录音频完整一些错误@karthikeyan –

和录音工作不正常@karthikeyan –

@KavyaShree'显示一些错误'，'不正常工作'没有帮助解决问题。提及你得到的错误 –

自动记录，并允许使用JQuery

回答

相关问题