一键运行 Javascript 2 个函数

我使用从网上下载的 HTML 和 JS 代码来录制音频，但有一个问题，因为页面加载到屏幕上后立即出现允许麦克风的消息。正是因为window.onload = function init()在源代码record.js中。但我想在单击按钮后显示消息。

因此，我尝试使用此按钮调用两个函数 -toggleRecording(button) and init()但是“button”元素有问题，所以它不起作用，但我认为如果它以良好的形式编写，它可以起作用。你能举例说明如何修改这两个函数吗init and toggleRecording被这个按钮调用？我是 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);
    });
  };

UPDATE:现在该系统按以下步骤运行： 1.function init()页面加载后且用户允许麦克风后立即运行startusermedia函数运行 2.点击按钮后运行toggleRecording(button)开始录音的功能 3.第二次点击按钮运行toggleRecording停止录音功能

如果可能的话，我想按以下步骤操作该系统： 1.首先点击按钮运行功能init and startusermedia and togglerecording因此单击后将立即开始录制 2.第二次点击会调用toggleRecording停止录音功能

它不起作用，因为init()实际上是一个附加到的变量window.onload。尝试删除window.onload=function init()并将其替换为function init()（因此页面加载时它不再运行），然后调用：

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

当您设置这样的事件处理程序时，您甚至不需要为函数命名。就像是window.onload = function() { ... }是完全有效的 - 他们被称为匿名函数。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Function_constructor_vs._function_declaration_vs._function_expression

我还注意到一些实施问题toggleRecording()，所以我也尽力解决这些问题。getAttribute()当然，需要一个元素，所以我们可以使用传递按钮this，并将其接收到toggleRecording() as the button多变的。

您的完整代码现在是：

//starts by click on button
function toggleRecording(button) {
  var run = parseInt(button.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) {
  //TODO: Uncomment this, I have it commented so there are no errors in the StackSnippet
  //showInfo("\n" + e + " " + (data || ''));
  console.log(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...');
}

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

<button onclick="init(); toggleRecording(this)">Click me</button>