Run 2 Functions With One Button Javascript

I use this HTML and JS code, which I downloaded from the web to record audio, but there is a problem because after the page is loaded on the screen immediatelly appears message to

Solution 1:

It's not working because init() is actually a variable attached to window.onload. Try removing window.onload=function init() and replacing it with just function init() (so it no longer runs when the page loads), then call:

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

When you're setting up event handlers like that, you don't even need to give the function a name. Something like window.onload = function() { ... } is perfectly valid - they're called anonymous functions.

I also noticed some implementation troubles with toggleRecording(), so I've done my best to fix those too. getAttribute() needs an element, of course, so we can pass the button using this, and receive it in toggleRecording() as the button variable.

Your full code is now:

//starts by click on buttonfunctiontoggleRecording(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;

functionstartUserMedia(stream) {
  var input = audio_context.createMediaStreamSource(stream);
  recorder = newRecorder(input);
  __log('Systém for recording is available.');
}

functionstartRecording(button) {
  recorder && recorder.clear();
  recorder && recorder.record();
  button.nextElementSibling.disabled = false;
  __log('Talk...');
}

functioninit() {
  try {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    audio_context = newAudioContext;
  } catch (e) {
    alert('This browser do not support audio!');
  }
  navigator.getUserMedia({
    audio: true
  }, startUserMedia, function(e) {
    __log('No audio was detected: ' + e);
  });
};

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

Solution 2:

You can attach multiple actions to a button programmatically using addEventListener if you wanted to.

So you may have:

<buttonid="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>

Solution 3:

If you want to make the code work after the Button is pressed, you should remove the onload event, because this will make the code work after the page is loaded.

You can create a second function and place it in there, Example:

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

In the toggleRecording(button) function you can call like:

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

If you want the second called first, place it over your existing code.

You also could to following:

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

But you still need to remove the onload event and wrap it around a function like above.

You also could do following (recommended):

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

Code:

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

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

Also again.. remove the onloadevent if you don't want to do it when the page has loaded.

The last example selects the button element with the ID record (I added it to your button-Tag) and adds an onclick-Event on it with onclick = function(){} which will be called when "onclick" of course.

Last but least: Don't just copy code, try to understand it so you can solve your problems easily by yourself :)

Solution 4:

In your case the init function is directly attached to the window.onload event and can't be called with the button, to ensure its call in the two events declare it as a global function and then attach it to the onload event like this:

JavaScript:

//function declaration
init = functioninit() {
try { 
  window.AudioContext = window.AudioContext || window.webkitAudioContext; 
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;   
  window.URL = window.URL || window.webkitURL;      
  audio_context = newAudioContext;      
} catch (e) { 
  alert('This browser do not support audio!');
}    
navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
  __log('No audio was detected: ' + e);
});
};

//Callwindow.onload = init();

HTML:

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

That should do it.

EDIT:

In order to achieve what you want, you have to attach the init() function to the window.onload event and the toggleRecording() function to the onclick event of the run button, like this:

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

And give your button the id="run":

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