javascriptgoogle-chromevariablesundefinedvoice-recording

converting defined variable as undefined during using recordJs library in chrome browser


I am using recordJs library for recording voice of client and send it to the server. In firefox and other browsers, it works well without any error. when i try to run it in chrome, it starts recording the voice, but when it calls stopRecording function, it faces following error:


Uncaught TypeError: Cannot read property 'stop' of undefined
    at stopRecording (توانایی-پرسش-سن-از-افراد:1209)
    at startTimer (توانایی-پرسش-سن-از-افراد:1364)

Here is my JS codes:


<script type="text/javascript">
    'use strict';

    //webkitURL is deprecated but nevertheless
    URL = window.URL || window.webkitURL;

    let gumStream;                      //stream from getUserMedia()
    let rec;                            //Recorder.js object
    let input;                          //MediaStreamAudioSourceNode we'll be recording

    // shim for AudioContext when it's not avb.
    let AudioContext = window.AudioContext || window.webkitAudioContext;
    let audioContext //audio context to help us record


    function startRecording() {
        console.log("recordButton clicked");

        /*
            Simple constraints object, for more advanced audio features see
            https://addpipe.com/blog/audio-constraints-getusermedia/
        */

        var constraints = { audio: true, video:false }

        /*
           Disable the record button until we get a success or fail from getUserMedia()
       */



        /*
            We're using the standard promise based getUserMedia()
            https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
        */

        navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
            console.log("getUserMedia() success, stream created, initializing Recorder.js ...");

            /*
                create an audio context after getUserMedia is called
                sampleRate might change after getUserMedia is called, like it does on macOS when recording through AirPods
                the sampleRate defaults to the one set in your OS for your playback device

            */
            audioContext = new AudioContext();

            //update the format
            // document.getElementById("formats").innerHTML="Format: 1 channel pcm @ "+audioContext.sampleRate/1000+"kHz"

            /*  assign to gumStream for later use  */
            gumStream = stream;

            /* use the stream */
            input = audioContext.createMediaStreamSource(stream);

            /*
                Create the Recorder object and configure to record mono sound (1 channel)
                Recording 2 channels  will double the file size
            */
            rec = new Recorder(input,{numChannels:1});


            //start the recording process
            rec.record();

            console.log("Recording started");

        }).catch(function(err) {

        });
    }

    function pauseRecording(){
        console.log("pauseButton clicked rec.recording=",rec.recording );
        if (rec.recording){
            //pause
            rec.stop();
        }else{
            rec.record();
        }
    }

    function stopRecording() {

        //tell the recorder to stop the recording
        rec.stop();

        //stop microphone access
        gumStream.getAudioTracks()[0].stop();

        //create the wav blob and pass it on to createDownloadLink
        rec.exportWAV(setUserVoice);
    }

    function setUserVoice(blob)
    {
        let formData = new FormData
        formData.append('userVoice', blob)

        $.ajax({
            type: 'POST',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: '{{ route('user.mockTest.participation.saveUserVoice') }}',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {

                if (data['result'] == 'success')
                {
                    $('#recordUserVoice').prop('disabled', true);
                }
                else
                {

                    Swal.fire(
                        '{{__('Error')}}',
                        '{{__('An error occurred')}}',
                        'error'
                    );

                }

            },
            error: function (err) {
                console.log(err);
            }
        });

    }

    function createDownloadLink(blob) {

        var url = URL.createObjectURL(blob);
        var au = document.createElement('audio');
        var li = document.createElement('li');
        var link = document.createElement('a');

        //name of .wav file to use during upload and download (without extendion)
        var filename = new Date().toISOString();

        //add controls to the <audio> element
        au.controls = true;
        au.src = url;

        //save to disk link
        link.href = url;
        link.download = filename+".wav"; //download forces the browser to donwload the file using the  filename
        link.innerHTML = "Save to disk";

        //add the new audio element to li
        li.appendChild(au);

        //add the filename to the li
        li.appendChild(document.createTextNode(filename+".wav "))

        //add the save to disk link to li
        li.appendChild(link);

        //upload link
        var upload = document.createElement('a');
        upload.href="#";
        upload.innerHTML = "Upload";
        upload.addEventListener("click", function(event){
            var xhr=new XMLHttpRequest();
            xhr.onload=function(e) {
                if(this.readyState === 4) {
                    console.log("Server returned: ",e.target.responseText);
                }
            };
            var fd=new FormData();
            fd.append("audio_data",blob, filename);
            xhr.open("POST","upload.php",true);
            xhr.send(fd);
        })
        li.appendChild(document.createTextNode (" "))//add a space in between
        li.appendChild(upload)//add the upload link to li

        //add the li element to the ol
        recordingsList.appendChild(li);
    }

document.getElementById('timer').innerHTML =
            '00' + ":" + '00';

        function startRecord()
        {
            startRecording();
            startTimer();
        }


        function startTimer() {

            $('#recordTextHolder').addClass('d-none');
            $('#timer').removeClass('d-none');

            var presentTime = document.getElementById('timer').innerHTML;
            var timeArray = presentTime.split(/[:]+/);
            var m = timeArray[0];
            console.log(timeArray[1])
            var s = checkSecond((parseInt(timeArray[1]) + 1));
            if(parseInt(s) == 5)
            {
                m = '0'+(parseInt(m)+1)
                s = '00'
            }

            if(m == 2 && s == 1){

                stopRecording()
                shake()
                return
            }

            document.getElementById('timer').innerHTML =
                m + ":" + s;
            console.log(m)
            setTimeout(startTimer, 1000);

        }

        function checkSecond(sec) {
            if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers <10
            if (sec < 0) {sec = "59"};
            return sec;

</script>

I would be grateful, if someone guide me to handle this problem.


Solution

  • It looks like you are setting the value of rec here:

    rec = new Recorder(input,{numChannels:1});
    

    And the error message is presumably from here:

    function stopRecording() {
    
        //tell the recorder to stop the recording
        rec.stop();
    

    Can you try adding a console.log?

    function stopRecording() {
    
        console.log("rec:", rec)
        rec.stop();
    

    Report back what rec contains at that time.

    Thanks for reporting that it says "undefined".

    Now ask yourself: how can 'rec' be undefined at that time?

    I assume that your console is showing the "recordButton clicked"?

    And the "getUserMedia() success..."?

    How about the "Recording started" message?

    I suggest getting rid of the following block:

    .catch(function(err) {
    
            });
    

    What that block does is silently "swallow" any error messages that you would otherwise see. In general, don't put in empty catch blocks unless you genuinely do not want to know about errors occurring there.