One button to run more functions JavaScript (recording audio in browser)

Question

Hi I have this source code to record audio in browser. Record.js calls another scripts that provides recording audio and save it to the server.

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

Now this recording system works in this steps:

1. function init() runs immediatelly when page is loaded and after user allows microphone in message startusermedia function runs 2 after clicking on button runs toggleRecording(button) function which starts recording audio
2. second click on button runs toggleRecording function which stop recording audio

I want to work this system in this steps if it is possible: 1. first click on button run functions "init" and "startusermedia" and "togglerecording" so recording will starts immediately after clicking 2. click will call "toggleRecording" function to stop recording

This topic is related to my previous question: Run 2 functions with one button Javascript

Answer 1

If I get your question correctly you just need something like this:

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

  toggleRecording(recordButton);
  recording = !recording;

}

And the button:

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

Answer 2

You can record and send audio through one function in vanilla js.

Here's an example.

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

With your permission I have added some extra features.

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