Audio Upload to folder using PHP Jquery

Question

Hiii Everyone.

Below is my HTML.

<!DOCTYPE html>
<html>
  <head>
    <script src="src/recorder.js"></script>
    <script src="src/Fr.voice.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/app.js"></script>
  </head>

  <body>
    <div class="center_div">
      <span class="recording_label">Please wait...</span>
      <span class="loader_bg"></span>
      <span class="loader_bg1"></span>

      <br/>
      <audio controls id="audio"></audio>
    </div>  

    <style>
      .center_div {
        width: 500px;
        height: 150px;
        background-color: #f5f5f5;
        border: 1px solid #808080;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-250px;/* half width*/
        margin-top:-75px;/* half height*/
        padding:25px;
      }

      .recording_label {
        display: block;
        text-align: center;
        padding: 10px;
        font-family: sans-serif;
        font-size: 1.1em;
        margin-bottom: 25px;
      }

      .loader_bg {
        min-width: 100%;
        background: #c5c5c5;
        min-height: 20px;
        display: block;
      }
      .loader_bg1 {
        min-width: 90%;
        background: grey;
        min-height: 20px;
        display: inline-block;
        position: relative;
        top: -20px;
      } 

      audio {
      }
    </style>
  </body>
</html>

In the above code I had tried to record and preview the audio once record complete processing. I want to upload that preview audio in folder using PHP. Can anyone help me in AJAX part how to send mp3 file. I had referred so many links but I couldn't get solution for this part. Kindly anyone help me. Thanks in advance. Please refer my working fiddle here.

Getting Source file like this:

<audio controls="" id="audio" src="blob:null/b63e868d-1628-4836-85da-90cf1b5b65c3"></audio>

How can I get this blob and convert it to mp3 and store in folder?

`audio` is not a form input element, you need to change to / add `input type=file src = 'blob src'` — Sachin Gadagi, Mar 20 '17 at 06:37
Like that only I had tried but I cant set input file src like tht — Kavya Shree, Mar 20 '17 at 06:38
I tried to set input type value with set attr title and in somany way but I cant change "no file chosen" with src name — Kavya Shree, Mar 20 '17 at 06:43
Your question seems unclear .. you want to record as well ? if yes, you have not mentioned here.. — Mittul At TechnoBrave, Mar 24 '17 at 11:42
I need to record as well as save that recorded audio to folder — Kavya Shree, Mar 24 '17 at 11:44
but in this example, will you get already recorded file in audio tag ? or you want record functionality as well here ? — Mittul At TechnoBrave, Mar 24 '17 at 11:45
Also if you can check this once http://www.9lessons.info/2015/03/audio-recording-with-custom-audio.html — Mittul At TechnoBrave, Mar 24 '17 at 11:46
Yes I had achieved tht part already.Now Im struggling in the stage of audio upload.Till recording and preview audio and get audio Blob I had completed — Kavya Shree, Mar 24 '17 at 11:46
In this link they saved that blob link in DB,I dont want to do like that.I need to convert blob to mp3 and after that need to upload audio file — Kavya Shree, Mar 24 '17 at 11:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/138929/discussion-between-mittul-at-technobrave-and-kavya-shree). — Mittul At TechnoBrave, Mar 24 '17 at 11:48
http://stackoverflow.com/questions/27220859/record-audio-from-user-and-save-to-server — Mittul At TechnoBrave, Mar 24 '17 at 11:51
http://imalhasaranga.com/2014/03/03/html5-video-audio-recording-and-uploading/ — Mittul At TechnoBrave, Mar 24 '17 at 11:53
Now check my question and run that html code in your local.SO that u can understand clearly. — Kavya Shree, Mar 24 '17 at 12:06

Karthikeyan Vedi · Accepted Answer · 2017-03-25T12:14:00.560

Change the code in app.js as below, Set the url in ajax call

  $(function(){
        var max = 40;
        var count = max + 1;
        var counter = setInterval(timer, 1000);

        function timer() {
            count = count - 1;
            if (count <= 0) {
                clearInterval(counter);
                $(".recording_label").html("Recording...");
                $('.loader_bg1').css({'min-width':''+(100)+'%'})
                    Fr.voice.record(false, function(){});
                    Fr.voice.stopRecordingAfter(40000, function(){
                      //alert("Recording stopped after 40 seconds");
                      Fr.voice.export(function(url){
                        $("#audio").attr("src", url);
                        $("#audio")[0].play();
                      }, "URL");

                    });
                recordingSec(40);
                return;
            }
            $(".recording_label").html("Recording will begin in " + count + " sec.");
            var percent = (count / max ) * 100 ;
            $('.loader_bg1').css({'min-width':''+(100 - percent)+'%'})
        }
  });

  function uploadAudio(){
    Fr.voice.exportMP3(function(blob){
        var data = new FormData();
        data.append('file', blob);

        $.ajax({
            url: "server.php",
            type: 'POST',
            data: data,
            contentType: false,
            processData: false,
            success: function(data) {
                // Sent to Server
            }
        });
    }, "blob");
  }

  function recordingSec(sec){
        var count = sec + 1;
        var counter = setInterval(timer, 1000);

        function timer() {
            count = count - 1;
            if (count <= 0) {
                clearInterval(counter);
                $(".recording_label").html("Recording stopped...Playing");
                $('.loader_bg1').css({'min-width':''+(100)+'%'})
                //stopRecording();
                return;
            }
            $(".recording_label").html("Recording started [ " + (sec - count) + " / " + sec + " ] sec.");
            var percent = (count / sec ) * 100 ;
            $('.loader_bg1').css({'min-width':''+(100 - percent)+'%'})
        }     
  }

Refer this Documentation

Check this file for reference

Server.php sample

<?php 
$path = 'audio/'; 
$location = $path . $_FILES['file']['name'] . ".mp3"; 
move_uploaded_file($_FILES['file']['tmp_name'], $location); 
 ?>

If there will be multiple recordings in single page.Then how can I achieve this.@karthikeyan .. Where We need to call uploadAudio() .. And here Fr.voice.exportMP3(function(blob)) how this blob will take values. — Kavya Shree, Mar 25 '17 at 05:37
@KavyaShree After recording audio call uploadAudio(), Refer the ajax part, audio file will be posted to the url — Karthikeyan Vedi, Mar 25 '17 at 05:53
Ya @karthikeyan .I tried like that only. But its not uploaded in folder.And If I try to click on the link Its showing site can't reached error — Kavya Shree, Mar 25 '17 at 05:55
@KavyaShree the reference sample does not include any serverside script, you have to write a php code save the file in server — Karthikeyan Vedi, Mar 25 '17 at 06:02
Instead of Fr.voice.exportMP3(function(blob) 'blob' whether I need to change any of the name. — Kavya Shree, Mar 25 '17 at 06:05
no need to change any name, Write a php file which will save the file in server, and in ajax part change the url to that file. — Karthikeyan Vedi, Mar 25 '17 at 06:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139005/discussion-between-kavya-shree-and-karthikeyan-vedi). — Kavya Shree, Mar 25 '17 at 06:09

Audio Upload to folder using PHP Jquery

1 Answers1