How to record audio in client code and upload recording to AWS S3 bucket

recorder.html

<!-- https://medium.com/@bryanjenningz/how-to-record-and-play-audio-in-javascript-faa1b2b3e49b -->
<!-- https://docs.aws.amazon.com/en_us/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html -->

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.585.0.min.js"></script>

<script>
    function uploadAWS(blob) {
        var vaultBucketName = "[YOUR-BUCKET-NAME]";
        var bucketRegion = "[YOUR-AWS-REGION]";
        var IdentityPoolId = "[YOUR-IDENTITY-POOL-ID]";
        
        //Let's create a filename as a DD-MM-YYYY--HH-SS.mpeg
        var currentDate = new Date();
        var recordkey = currentDate.getDate().toString() + '-' + currentDate.getMonth().toString() + '-' +
            currentDate.getFullYear().toString() + '--' + currentDate.getHours().toString() + '-' + currentDate.getMinutes().toString() + '.mpeg';

        AWS.config.update({
            region: bucketRegion,
            credentials: new AWS.CognitoIdentityCredentials({
                IdentityPoolId: IdentityPoolId
            })
        });

        var s3 = new AWS.S3({
            apiVersion: "2006-03-01",
            params: { Bucket: vaultBucketName }
        });

        var upload = new AWS.S3.ManagedUpload({
            params: {
                Bucket: vaultBucketName,
                Key: recordkey,
                Body: blob//,
                //ACL: "public-read"
            }
        });

        var promise = upload.promise();

        promise.then(
            function (data) {
                console.log("Successfully uploaded new record to AWS bucket " + vaultBucketName + "!");
            },
            function (err) {
                return alert("There was an error uploading your record: ", err.message);
            }
        );
    }

    function countdown(time) {
        var timeleft = time;
        var downloadTimer = setInterval(function () {
            document.getElementById("timer").value = time - timeleft;
            timeleft -= 1;
            if (timeleft <= 0) {
                clearInterval(downloadTimer);
                document.getElementById("timer").value=0;
            }
        }, 1000);
    }

    function record() {
        var recordButton = document.getElementById('record');
        var playButton = document.getElementById('play');
        var progress = document.getElementById('progress');
        var timer = document.getElementById('timer');
        recordButton.style.display = 'none';
        progress.style.display = 'block';
        timer.style.display = 'block';        

        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(stream => {
                const mediaRecorder = new MediaRecorder(stream);
                mediaRecorder.start();
                
                countdown(10);
                
                const audioChunks = [];
                mediaRecorder.addEventListener("dataavailable", event => {
                    audioChunks.push(event.data);
                });

                mediaRecorder.addEventListener("stop", () => {
                    const audioBlob = new Blob(audioChunks);
                    const audioUrl = URL.createObjectURL(audioBlob);

                    uploadAWS(audioBlob);

                    progress.style.display = 'none';
                    timer.style.display='none';
                    playButton.style.display = 'block';
                    recordButton.style.display = 'block';
                    playButton.addEventListener('click', function () {
                        const audio = new Audio(audioUrl);
                        audio.play();
                    }, false);
                });

                setTimeout(() => {
                    mediaRecorder.stop();
                }, 10000);
            });
    }
</script>
<div>
    <button id='record' onclick="record()" style="width: 250;">Click to record!</button>
    <img id='progress' style='display:none; width: 250;' src='sound.gif' /> //animated gif to illustrate recording process:)
    <progress value="0" max="10" id="timer" style='display:none; width: 250;' ></progress>
    <br><br>
    <button id='play' style='display:none; width: 250;'>Click to play</button>
</div>