blob data is not converting to real wav or mp3 file

Viewed 49

hi i am using this JavaScript and it sends data correctly but the problem is temp file contains only this when i try to upload at server end

 blob:https://sitename.com/03f06abe-6d00-4c4d-86bd-317db4bff616.wav

when i use php move_uploaded_file it writes the data to the given path but instead of real audio file it just writes the link of blob i want to upload the wav or mp3 file of recorded audio. i have got code from this link and seems everything is working except data is not audio its just blob link when we move_uploaded_file use

Record and upload audio in jquery and php

here is my jquery

jQuery(document).ready(function () {
    var $ = jQuery;
    var myRecorder = {
        objects: {
            context: null,
            stream: null,
            recorder: null
        },
        init: function () {
            if (null === myRecorder.objects.context) {
                myRecorder.objects.context = new (
                    window.AudioContext || window.webkitAudioContext
                    );
            }
        },
        start: function () {
            var options = {audio: true, video: false};
            navigator.mediaDevices.getUserMedia(options).then(function (stream) {
                myRecorder.objects.stream = stream;
                myRecorder.objects.recorder = new Recorder(
                    myRecorder.objects.context.createMediaStreamSource(stream),
                    {numChannels: 1}
                    );
                myRecorder.objects.recorder.record();
            }).catch(function (err) {});
        },
        stop: function (listObject) {
            if (null !== myRecorder.objects.stream) {
                myRecorder.objects.stream.getAudioTracks()[0].stop();
            }
            if (null !== myRecorder.objects.recorder) {
                myRecorder.objects.recorder.stop();

                    // Validate object
                    if (null !== listObject
                        && 'object' === typeof listObject
                        && listObject.length > 0) {
                        // Export the WAV file
                    myRecorder.objects.recorder.exportWAV(function (blob) {
                        var url = (window.URL || window.webkitURL)
                        .createObjectURL(blob);
                            // Prepare the playback
                            var audioObject = $('<audio controls></audio>')
                            .attr('src', url);
                            var link = url+'.wav';
                            $('#audio').attr('value',link);
                            var blob = new Blob([link], {type: 'audio/wav'});
                            var reader = new FileReader();
                            reader.onload = function () {
                              var b64 = reader.result.replace(/^data:.+;base64,/, '');
                          };
                         
                          reader.readAsDataURL(blob);
                          var form_data = new FormData();
                          form_data.append('file', blob);
                          $.ajax({
                                url: "upload_recording1.php", 
                                cache: false,
                                contentType: false,
                                processData: false,
                                data: form_data, 
                                type: 'post',
                                success: function(data) {
                                }
                          });
                    });
                }
            }
        }

    };  
        
});

my php is this

if(isset($_FILES['file']) and !$_FILES['file']['error']){

    move_uploaded_file($_FILES['file']['tmp_name'], "saved_audio/11.wav");
}

================================= edit 1 , ajax inside reader.onload same issue

  jQuery(document).ready(function () {
            var $ = jQuery;
            var myRecorder = {
                objects: {
                    context: null,
                    stream: null,
                    recorder: null
                },
                init: function () {
                    if (null === myRecorder.objects.context) {
                        myRecorder.objects.context = new (
                            window.AudioContext || window.webkitAudioContext
                            );
                    }
                },
                start: function () {
                    var options = {audio: true, video: false};
                    navigator.mediaDevices.getUserMedia(options).then(function (stream) {
                        myRecorder.objects.stream = stream;
                        myRecorder.objects.recorder = new Recorder(
                            myRecorder.objects.context.createMediaStreamSource(stream),
                            {numChannels: 1}
                            );
                        myRecorder.objects.recorder.record();
                    }).catch(function (err) {});
                },
                stop: function (listObject) {
                    if (null !== myRecorder.objects.stream) {
                        myRecorder.objects.stream.getAudioTracks()[0].stop();
                    }
                    if (null !== myRecorder.objects.recorder) {
                        myRecorder.objects.recorder.stop();

                            // Validate object
                            if (null !== listObject
                                && 'object' === typeof listObject
                                && listObject.length > 0) {
                                // Export the WAV file
                            myRecorder.objects.recorder.exportWAV(function (blob) {
                                var url = (window.URL || window.webkitURL)
                                .createObjectURL(blob);
                                    // Prepare the playback
                                    var audioObject = $('<audio controls></audio>')
                                    .attr('src', url);
                                    var link = url+'.wav';
                                    $('#audio').attr('value',link);
                                    var blob = new Blob([link], {type: 'audio/wav'});
                                    var reader = new FileReader();
                                    reader.onload = function () {
                                      var b64 = reader.result.replace(/^data:.+;base64,/, '');
                                      
                                                 var form_data = new FormData();
                                        form_data.append('file', blob);
                                        $.ajax({
                                    url: "upload_recording1.php", 
                                    cache: false,
                                    contentType: false,
                                    processData: false,
                                    data: form_data, 
                                    type: 'post',
                                    success: function(data) {
                                  }
                              });
                                      
                                      
                                  };
                                 
                                  reader.readAsDataURL(blob);
                       
                                 
                                });
                        }
                    }
                }

            };  
                
            });
0 Answers
Related