Menu
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?
966
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 you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
