一键运行 2 个功能 Javascript

Question

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

出于这个原因，我尝试使用此按钮调用两个函数 - toggleRecording(button) 和 init() 但“按钮”元素存在问题，所以它不起作用，但我认为它可以工作，如果它会写得好。你能告诉我如何修改这两个函数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

如果您愿意，可以使用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 3

如果你想让代码在按钮被按下后工作，你应该移除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();
}

同样...删除onloadevent 如果您不想在页面加载后执行此操作。

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

最后但最不重要的是：不要只是复制代码，尝试理解它，这样您就可以轻松地自己解决问题:)

Answer 4

在您的情况下，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>