如何用一个按钮录制声音并自动上传?

时间:2015-04-04 11:03:01

标签: javascript upload record

您好我使用此HTML代码调用JS来记录语音,然后将其保存到我的服务器。我必须点击“开始”,然后点击“停止”录制,录制后点击“上传”。我想让它变得更容易。因此用户必须点击“开始”和“停止”,之后它将自动上传到服务器上。你能帮我解决这个问题吗,因为我是新人,我不知道怎么做,谢谢。

<html>
<body>   
  <button onclick="startRecording(this);">Start Recording</button>
  <button onclick="stopRecording(this);" disabled>Stop Recording</button>
  <button onclick="uploadIt(this);" id="uploadBtn" disabled>Upload Recording</button> 
  </body>
</html>
  

HTML调用JS提供录制和上传:

<script>
  var audio_context;
  var recorder;
  function startRecording(button) {
    recorder && recorder.clear(); 
    recorder && recorder.record(); // start recording 
    document.getElementById('uploadBtn').disabled = true; 
    button.disabled = true; //dont allow hit record button during recording 
    button.nextElementSibling.disabled = false;
  }

  function stopRecording(button) {    
    recorder && recorder.stop(); 
    button.disabled = true; 
    button.previousElementSibling.disabled = false;
    
    createDownloadLink(); 
    document.getElementById('uploadBtn').disabled = false; //allow upload after recording
  }
  
  function uploadIt(button) { 
    recorder && recorder.exportWAV(function(blob) {  // it calls function uploadAudioFromBlob from external file
      uploadAudioFromBlob(blob);
    });
  }

1 个答案:

答案 0 :(得分:0)

@holgac谢谢,我把上传功能设置为stopRecording功能,效果很好:

function stopRecording(button) {    
    recorder && recorder.stop(); 
    button.disabled = true; 
    button.previousElementSibling.disabled = false;
   
    recorder && recorder.exportWAV(function(blob) {  
      uploadAudioFromBlob(blob);
    });
  }