自動記錄，並允許使用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

回答

相關問題