Question

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

出于这个原因，我尝试使用此按钮调用两个函数 - toggleRecording(button)和init()但是“button”元素出现问题，所以它不起作用，但我认为它可以工作，如果它将以良好的形式书写。你能举例说明如何修改这个按钮调用的这两个函数init和toggleRecording吗？我是JS的新手，我不知道它是如何工作的。

index.html

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

record.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)功能开始录音 3.第二次点击按钮运行toggleRecording功能，停止录音

如果有可能，我想在此步骤中使用此系统： 1.首先点击按钮运行功能init和startusermedia以及togglerecording，以便点击后立即开始录制 2.第二次点击将调用toggleRecording功能停止录制

Answer 1

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

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

当您设置这样的事件处理程序时，您甚至不需要为该函数指定名称。类似window.onload = function() { ... }的内容完全有效 - 它们被称为anonymous functions.

我也注意到了toggleRecording()的一些实现问题，所以我也尽力解决这些问题。当然，getAttribute()需要一个元素，因此我们可以使用this传递按钮，并在toggleRecording()中将其作为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>

Answer 2

在您的情况下，init函数直接附加到window.onload事件，并且无法使用按钮调用，以确保其在两个事件中的调用将其声明为全局函数然后将它附加到onload事件，如下所示：

<强> JavaScript的：

//function declaration
init = 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);
});
};

//Call
 window.onload = init();

<强> HTML：

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

应该这样做。

编辑：

为了实现您的目标，您必须将init()函数附加到window.onload事件，将toggleRecording()函数附加到run button的onclick事件，像这样：

//Call
 window.onload = init();
 document.getElementById("run").onclick = toggleRecording();

然后按下id="run"：

按钮

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

Answer 3

如果您愿意，可以使用addEventListener以编程方式将多个操作附加到按钮。

所以你可能有：

<button id="test" type="submit" onclick="toggleRecording()" data-run="0"></button>
<script>
   var btn = document.getElementById("test");
   btn.addEventListener("click", init);
   btn.addEventListener("click", toggleRecording);
   // More if wanted.
</script>

Answer 4

如果要在按下按钮后使代码生效，则应删除onload事件，因为这将使代码在页面加载后生效。

您可以创建第二个函数并将其放在那里，例如：

function secondFunction(){
    // Put Code inside here
}

在toggleRecording(button)函数中，您可以调用：

function toggleRecording(button) {
    // .. the existing code
    secondFunction();
}

如果您希望第一个被调用，请将其放在现有代码上。

你也可以关注：

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

但是你仍然需要删除onload事件并将其包装在上面的函数中。

您也可以关注（推荐）：

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

代码：

var button = document.getElementById( 'record' );

var button.onclick = function(e){
     toggleRecording(e);
     secondFunction();
}

如果您不想在页面加载时执行此操作，请再次移除onload事件。

最后一个示例选择ID为record的按钮元素（我已将其添加到您的button - 代码中），并在其上添加onclick - 事件onclick = function(){}当然，当“onclick”时会被调用。

最后但最不重要：不要只是复制代码，尝试理解它，以便您可以自己轻松解决问题：）

使用一个按钮Javascript运行2个功能

4 个答案:

编辑：