karimali1337's avatar

Failed to move audio

I'm recording voice and created a script to save it to DB,it saved but never moved to the public folder and it gives error

Call to a member function getClientOriginalName() on string

Controller

   public function store(Request $request)
    {
        $observe = new Observation();
        $observe->recorder = $request->recorder;
        $observe->longitude = $request->longitude;
        $observe->specific_location = $request->specific_location;
        $observe->type = $request->type;
        $observe->title = $request->title;
        $observe->description = $request->description;
        $observe->comment = $request->comment;
        $observe->status = $request->status;
        $observe->question = $request->question;
        $observe->date = $request->date;
        $observe->time = $request->time;
        $observe->action = $request->action;
        $observe->user_id = auth()->user()->id;
        $observe->project_id = $request->projects;
        //  $observe->life_id =$request->lifes;
                $voice=$request->input('recorder');
        $voiceRecord=Time() . "_" . $voice->getClientOriginalName();
        $voice->move('records',$voiceRecord);
        Observation::create([
            'recorder'=>$voiceRecord
        ]);
        $observe->save();

Script

  <script src="http://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>

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

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

        // shim for AudioContext when it's not avb.
        var AudioContext = window.AudioContext || window.webkitAudioContext;
        console.log(AudioContext);
        var audioContext //audio context to help us record

        var recordButton = document.getElementById("recordButton");
        var stopButton = document.getElementById("stopButton");
        var pauseButton = document.getElementById("pauseButton");
        //add events to those 2 buttons
        recordButton.addEventListener("click", startRecording);
        stopButton.addEventListener("click", stopRecording);
        pauseButton.addEventListener("click", pauseRecording);

        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()
             */

            recordButton.disabled = true;
            stopButton.disabled = false;
            pauseButton.disabled = false

            /*
             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) {
                //enable the record button if getUserMedia() fails
                recordButton.disabled = false;
                stopButton.disabled = true;
                pauseButton.disabled = true
            });
        }

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

            }
        }

        function stopRecording() {
            console.log("stopButton clicked");

            //disable the stop button, enable the record too allow for new recordings
            stopButton.disabled = true;
            //false->true 1 recored
            recordButton.disabled = true;
            pauseButton.disabled = true;

            //reset button just in case the recording is stopped while paused
            pauseButton.innerHTML = "Pause";

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

        }

        function createDownloadLink(blob) {

            var url = URL.createObjectURL(blob);
            var au = document.createElement('audio');
            // au.setAttribute('name', 'recorder');
            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);


            inputElemFile = document.createElement('input')
            inputElemFile.name = "recorder_file"
            inputElemFile.value = blob //string // file
            inputElemFile.type = 'hidden'
            inputElem = document.createElement('input')
            inputElem.name = "recorder"
            inputElem.value = filename + ".wav" //string // file
            inputElem.type = 'hidden'
            var inputDiv = document.getElementById('input-audio');
            inputDiv.append(inputElem);
            //inputDiv.append(inputElemFile);

            var xhr = new XMLHttpRequest();
            xhr.onload = function(e) {
                if (this.readyState === 4) {
                    console.log('save...!')
                }
            };

            var fd = new FormData();
            fd.append("recorder", blob, filename + '.wav');
            xhr.open("POST", "{{ route('upload.voice.record') }}", true);
            xhr.send(fd);




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

create.blade

<div id="controls">
                                                <button id="recordButton"
                                                    style="height: 33px; width: 288px; border: 1px solid white;"><i
                                                        class="fa fa-microphone" aria-hidden="true"> </i> Voice
                                                    Record </button>
                                                <button hidden id="pauseButton" disabled> Pause </button>
                                                <button id="stopButton" style="height: 33px;width: 82px;" disabled>
                                                    Stop </button>
                                            </div>
                                            <div id="formats" style="display: none">Format: start recording to see
                                                sample rate
                                            </div>
                                            <ol style=" margin-top: 20px" id="recordingsList"></ol>
                                            <div id="input-audio"></div>

0 likes
2 replies
Sinnbeck's avatar

Use dd() to see what you are dealing with.

dd($request->input('recorder'));
karimali1337's avatar

@Sinnbeck

"2022-04-13T09:29:47.488Z.wav"

the name of the file i cannot figure out how to move the file

Please or to participate in this conversation.