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 How can I get this blob and convert it to mp3 and store in folder
1 Answers
Answers 1
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)+'%'}) } } Server.php sample
<?php $path = 'audio/'; $location = $path . $_FILES['file']['name'] . ".mp3"; move_uploaded_file($_FILES['file']['tmp_name'], $location); ?> 
0 comments:
Post a Comment