一键运行更多功能JavaScript(在浏览器中录制音频)

Question

嗨，我有这个源代码可以在浏览器中录制音频。 Record.js调用另一个提供录制音频的脚本并将其保存到服务器。

索引.html

<button type="submit" onclick="toggleRecording()" data-run="0"></button>

记录.js

//starts by click on button
  function toggleRecording() {
    var run = parseInt(getAttribute('data-run')); //
      if(run === 1) {
      recorder && recorder.stop();
      recorder && recorder.exportWAV(function(blob) {
        uploadAudioFromBlob(blob);
      });
      __log('Recording is  stopped.');
      button.setAttribute('data-run', 0);
    } 
    else {
      recorder && recorder.clear();
      recorder && recorder.record();
      __log('Speak...');
      button.setAttribute('data-run', 1);
    }
  }
  function __log(e, data) {     
showInfo("n" + e + " " + (data || ''));  
  }
  var audio_context;
  var recorder;
  function startUserMedia(stream) { 
    var input = audio_context.createMediaStreamSource(stream); 
    recorder = new Recorder(input); 
    __log('Systém for recording is available.'); 
  }
  function startRecording(button) {   
    recorder && recorder.clear(); 
    recorder && recorder.record(); 
    button.nextElementSibling.disabled = false;
    __log('Talk...'); 
  }
   window.onload=function init() {
    try { 
      window.AudioContext = window.AudioContext || window.webkitAudioContext; 
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;   
      window.URL = window.URL || window.webkitURL;      
      audio_context = new AudioContext;      
    } catch (e) { 
      alert('This browser do not support audio!');
    }    
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No audio was detected: ' + e);
    });
  };

现在，此录制系统在以下步骤中工作：

1. function init()在加载页面时立即运行，并在用户允许消息中的麦克风后立即运行startusermedia功能运行2 单击按钮后运行toggleRecording(button)开始录制音频的功能
2. 第二个单击按钮运行停止录制音频的功能toggleRecording

如果可能的话，我想在以下步骤中使用此系统：1.首先单击按钮运行功能"初始化"和"启动用户媒体"和"切换录制"，因此单击后将立即开始录制2.单击将调用"切换录制"功能以停止录制

这个主题与我之前的问题有关：使用一个按钮运行 2 个函数 Javascript

Answer 1

如果我

正确理解了您的问题，您只需要这样的东西：

var recording = false;
var recordButton = document.getElementById('recordButton');
function startRecording() {
   if(!recording)
   {
      init();
      startusermedia(recordButton); 
  }
  toggleRecording(recordButton);
  recording = !recording;
}

和按钮：

<button type="submit" onclick="startRecording();" data-run="0" id="recordButton"></button>

Answer 2

您可以通过vanilla js中的一个函数录制和发送音频。

下面是一个示例。

<button id="recordAudio">RECORD</button>

在您的许可下，我添加了一些额外的功能。

function recordAudioFromMicrophone()
{
    var recordAudioButton = document.getElementById( "recordAudio" );
    var mediaRecorder;
    var autoStopAfter = 10000;
    var time;
    var isStartRec = true;
        
    var run = function(stream)
    {
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.addEventListener("dataavailable", getAudio);
        recordAudioButton.addEventListener("click", recordHandler);
    }
    function recordHandler()
    {
        if(isStartRec)
        {
            startRec();
            time = setTimeout(stopRec, autoStopAfter);
        }
        else
        {
            stopRec();
            clearTimeout(time);
        }
    }
    function startRec()
    {
        mediaRecorder.start();
        isStartRec = false;
    }
    function stopRec()
    {
        mediaRecorder.stop();
        isStartRec = true;
    }
    function getAudio(blob)
    {
        var reader = new FileReader();
        reader.readAsDataURL(blob.data); 
        reader.onloadend = function()
        {
            var base64data = reader.result;
            initServer.sendAudio( base64data );
        }
    }
    const enableAudio = { audio: true };
    navigator.mediaDevices.getUserMedia(enableAudio).then(run);
}
function initServer()
{
    function sendAudio(file)
    {
        ...
    }
    initServer.sendAudio = sendAudio;
}
recordAudioFromMicrophone();
initServer();