Hola a todos.
A continuación se muestra mi 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> En el código anterior, intenté grabar y obtener una vista previa del audio una vez que grabé el procesamiento completo. Quiero cargar ese audio de vista previa en la carpeta usando PHP . ¿Alguien puede ayudarme en la parte de AJAX sobre cómo enviar un archivo mp3 ? Había referido tantos enlaces pero no pude obtener una solución para esta parte. Amablemente alguien me ayude. Gracias por adelantado. Consulte mi violín de trabajo aquí.
Obteniendo un archivo fuente como este:
<audio controls="" id="audio" src="blob:null/b63e868d-1628-4836-85da-90cf1b5b65c3"></audio> ¿Cómo puedo obtener este blob y convertirlo a mp3 y almacenarlo en una carpeta?
Cambie el código en app.js como se muestra a continuación, configure la URL en la llamada ajax
$(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)+'%'}) } }Verifique este archivo como referencia
Ejemplo de servidor.php
<?php $path = 'audio/'; $location = $path . $_FILES['file']['name'] . ".mp3"; move_uploaded_file($_FILES['file']['tmp_name'], $location); ?>