2017-03-20 3 views
13

Hiii Everyone.Audio Upload in Ordner mit PHP Jquery

Unten ist mein 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 dem oben genannten Code hatte ich versucht, die Audio-Aufnahme und Vorschau der vollständigen Verarbeitung von Audiodaten aufzunehmen. Ich möchte dieses Vorschau-Audio im Ordner unter PHP hochladen. Kann jemand mir in AJAX Teil helfen, wie man mp3 Datei sendet. Ich hatte so viele Links erwähnt, aber ich konnte keine Lösung für diesen Teil finden. Bitte hilf mir. Danke im Voraus. Bitte beziehen Sie sich hier auf meine Arbeitsgeige.

Erste Quelle-Datei wie folgt:

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

Wie kann ich diesen Blob bekommen und es zu mp3 und speichern in Ordner konvertieren?

+0

'audio' ist kein Formulareingabeelement, Sie müssen zu/add 'input type = file src = 'blob src ändern '' –

+0

So habe ich nur versucht, aber ich kann Eingabedatei src nicht wie tht setzen –

+0

Ich habe versucht, Eingabeart Wert mit festgelegten attr Titel und auf eine Weise, aber ich kann nicht ändern "keine Datei ausgewählt" mit src Name –

Antwort

8

Ändern Sie den Code in app.js wie unten, Stellen Sie die URL in Ajax-Aufruf

$(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 Probe

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

Ich kann diesen Verweis Link nicht bekommen .. @ karthikeyan –

+0

Wenn es mehrere Aufnahmen in einer einzelnen Seite sein wird.Wie kann ich das erreichen @ @ @ Carthikeyan .. Wo wir brauchen um uploadAudio() aufzurufen .. Und hier Fr.voice.exportMP3 (function (blob)) wie dieser blob Werte annehmen wird. –

+0

@KavyaShree Nach der Aufnahme Audio-Anruf uploadAudio(), beziehen Sie sich auf den Ajax-Teil, Audiodatei wird auf die URL –