Record Audio on Website that works on all browsers and iOS

Question

I have wasted a ton of time implementing multiple audio recording options in a website I'm building but each one either only works in Chrome, only in Firefox, both but not Safari, and none work on iOS.

The website needs to allows the user to record their message and save it in a form state for submission.

All the current articles I am reading are a few months old and mention that iOS doesn't/will support it soon. I've tried mobile Chrome on iOS and it still didn't work.

Has anyone found a way to simply record audio in a browser as well as mobile website??

Things I've tried:

• Francium Voice (An abandoned javascript project, works for Chrome. Records and saves and I am able to send the audio file through the form data. https://subinsb.com/html5-record-mic-voice/. But this uses the < audio > tag which shows as "error" and doesn't allow you to record.
• I started trying getUserMedia() as that seems to be the new standard and says it's supported on more devices/browsers but the mic wouldn't work on iOS either. https://www.html5rocks.com/en/tutorials/getusermedia/intro/
• Many articles say to use the Record.js, https://github.com/mattdiamond/Recorderjs, but that is also an abandoned project. I could only get the audio to record, but it wasn't saving it. Again not working in Safari or iOS.
• I tried using the audio/* technique but couldn't get it to work right. It would only show an upload button, couldn't get the mic option to show. Based on the documentation it seems like the one that "should" work though. https://developers.google.com/web/fundamentals/media/recording-audio/

Currently using the following code which works, for Chrome and Firefox.

HTML

<audio controls src="" id="audio"></audio> <a class="button" id="record">Record</a> <input type="hidden" id="audiofile" name="audiofile" value="" aria-hidden="true"/>

Using the Francium Voice library:

Javascript

    // Audio Recording for Phone Calls
  $(document).on("click", "#record:not(.stop)", function(){
  elem = $(this);
    $("#audio").attr("src","");
    $("#audiofile").val("");
  Fr.voice.record($("#live").is(":checked"), function(){
  elem.addClass("stop");
});
    elem.html("Stop <label id='minutes'>00</label>:<label   id='seconds'>00</label>");
    var minutesLabel = document.getElementById("minutes");
    var secondsLabel = document.getElementById("seconds");
    var totalSeconds = 0;
    setInterval(setTime, 1000);

    function setTime() {
        ++totalSeconds;
        secondsLabel.innerHTML = pad(totalSeconds % 60);
        minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
    }

    function pad(val) {
        var valString = val + "";
        if (valString.length < 2) {
            return "0" + valString;
        } else {
            return valString;
        }
    }
});

$(document).on("click", ".stop", function(){
    elem = $(this);
    elem.html("Record");
    elem.removeClass("stop");
Fr.voice.export(function(base64){
  $("#audio").attr("src", base64);
        $("#audiofile").val(base64);
        $("#audio")[0].play();
}, "base64");
    Fr.voice.stop();
});  

Answer 1

I found a technique that finally worked on Chrome, Firefox, and iOS Safari. There is an issue with getUserMedia in Safari though but I'm looking into that now.

https://github.com/GersonRosales/Record-Audios-and-Videos-with-getUserMedia