Hace unos cuantos días, un amigo mío me envió un mensaje de audio en Facebook Messenger. Fue en ese momento cuando me di cuenta de que no había hablado nada sobre grabación de audio online en programacion.net. En este artículo os voy a hablar sobre cómo publicar mensajes de audio utilizando jQuery y HTML5 con un reproductor de audio personalizado para enviarlos a un newsfeed. Si estás implementando una red social, y buscas ese componente que enganche a tu audiencia, has dado con el elemento adecuado.
Base de datos
La tabla newsfeed contiene toda la información relativa a las actualizaciones de los usuarios.
CREATE TABLE newsfeed(
id INT PRIMARY KEY AUTO_INCREMENT,
userUpdate TEXT,
user_id_fk INT,
audioMessage TEXT,
status ENUM('0','1') DEFAULT '1');
Javascript
Debes incluir todas estas librerías de Javascript.
<script src="recorderControl.js"></script>
<script src="js/jquery.min.2.1.js"></script> //Jquery
<script src="js/jquery.stopwatch.js"></script> //Jquery Stop Watch
<script src="recorder.js"></script>
<script type="text/javascript">
$(document).ready(function(){
-----
-----
-----
});
</script>
Código para el reproductor de audio
Código HTML para diseñar el reproductor de audio personalizado. Aquí, el reproductor HTML5 actual está en modo oculto. El número 10 hace referencia al id de sesión del usuario.
<div class="audioContainer">
<div class="audioProgress" id="audioProgress10'" style="width:0px"></div>
<div class="audioControl audioPlay" rel="play" id="10"></div>
<div class="audioTime" id="audioTime10'">00.00</div>
<div class="audioBar"></div>
<audio preload="auto" src="data:audio/mp3;base64,//sUxAAABAArMFRhgA.." type="audio/mpeg" class="a" id="audio10'"><source></audio>
</div>
CSS del reproductor de audio
Vamos a darle un poco de color a los componentes del reproductor de audio
audio{display:none}
.audioContainer
{
height:50px;width:250px;
border:solid 1px #dedede;
position:relative;
}
.audioProgress
{
height:50px;float:left;background-color:#f2f2f2;z-index:800
}
.audioControl
{
position: absolute;float:left;width:52px;height:48px;;
}
.audioTime
{
position: absolute;width: 45px;height: 20px;margin-left:199px;float:right;
}
.audioBar
{
height: 3px;
background-color: #cc0000;
position: absolute;width: 147px;margin-left: 53px;
}
.audioPlay
{
background:url('../images/play.png') no-repeat
}
.audioPause
{
background:url('../images/pause.png') no-repeat
}
Javascript relativo al audio
En la sentencia $('body').on('click','.audioControl', function(), audioControl es el nombre de la clase del tag DIV. Utilizando $(this).attr("id") haremos referencia al ID del reproductor.
// Utility method that will give audio formatted time
getAudioTimeByDec = function(cTime,duration)
{
var duration = parseInt(duration),
currentTime = parseInt(cTime),
left = duration - currentTime, second, minute;
second = (left % 60);
minute = Math.floor(left / 60) % 60;
second = second < 10 ? "0"+second : second;
minute = minute < 10 ? "0"+minute : minute;
return minute+":"+second;
};
// Custom Audio Control using Jquery
$("body").on("click",".audioControl", function(e)
{
var ID=$(this).attr("id");
var progressArea = $("#audioProgress"+ID);
var audioTimer = $("#audioTime"+ID);
var audio = $("#audio"+ID);
var audioCtrl = $(this);
e.preventDefault();
var R=$(this).attr('rel');
if(R=='play')
{
$(this).removeClass('audioPlay').addClass('audioPause').attr("rel","pause");
audio.trigger('play');
}
else
{
$(this).removeClass('audioPause').addClass('audioPlay').attr("rel","play");
audio.trigger('pause');
}
// Audio Event listener, its listens audio time update events and updates Progress area and Timer area
audio.bind("timeupdate", function(e)
{
var audioDOM = audio.get(0);
audioTimer.text(getAudioTimeByDec(audioDOM.currentTime,audioDOM.duration));
var audioPos = (audioDOM.currentTime / audioDOM.duration) * 100;
progressArea.css('width',audioPos+"%");
if(audioPos=="100")
{
$("#"+ID).removeClass('audioPause').addClass('audioPlay').attr("rel","play");
audio.trigger('pause');
}
});
// Custom Audio Control End
});
Botón de grabar
Este sería el HTML del botón de grabación.
<img src="images/Microphone.png" id="recordButton" class="recordOff">
<span id="recordHelp">Allow your microphone.</span>
<div id="recordContainer" class="startContainer">
<div id="recordTime"> <span id="sw_m">00</span>:<span id="sw_s">00</span></div>
<div id="recordCircle" class="startRecord"><div id="recordText">Record</div></div>
</div>
CSS
#recordCircle
{
margin: 0px auto;
font-weight: bold;
cursor: pointer;
width: 100px;
height: 100px;
text-align: center;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Javascript del botón de grabación
Este script llama a record.js para grabar el audio
$("body").on('click','.recordOn',function()
{
$("#recordContainer").toggle();
});
//Record Button
$("#recordCircle").mousedown(function()
{
$(this).removeClass('startRecord').addClass('stopRecord');
$("#recordContainer").removeClass('startContainer').addClass('stopContainer');
$("#recordText").html("Stop");
$.stopwatch.startTimer('sw'); // Stopwatch Start
startRecording(this); // Audio Recording Start
}).mouseup(function()
{
$.stopwatch.resetTimer(); // Stopwatch Reset
$(this).removeClass('stopRecord').addClass('startRecord');
$("#recordContainer").removeClass('stopContainer').addClass('startContainer');
$("#recordText").html("Record");
stopRecording(this); // Audio Recording Stop
});
record.js
Mediante este script almacenaremos la información de la grabación en formato Base64
function uploadAudioBase64(audiosrc)
{
var dataString ='audiosrc='+audiosrc;
$.ajax({
type: "POST",
url: "uploadAudio.php",
data: dataString,
cache: false,
success: function(html)
{
var ID = Number(new Date()); //Timestamp
var A='<div class="audioContainer">'
+'<div class="audioProgress" id="audioProgress'+ID+'" style="width:0px"></div>'
+'<div class="audioControl audioPlay" rel="play" id="'+ID+'"></div>'
+'<div class="audioTime" id="audioTime'+ID+'">00.00</div>'
+'<div class="audioBar"></div>'
+'<audio preload="auto" src="'+audiosrc+'" type="audio/mpeg" class="a" id="audio'+ID+'"><source></audio>'
+'</div>';
var B='<div class="stbody"><div class="stimg ">'
+'<a href="https://labs.9lessons.info/srinivas"><img src="http://www.gravatar.com/avatar/c9e85bd3f889cc998dd1bb71d832634b?d=mm&s=230" class="big_face " alt="You" ></a></div>'
+'<div class="sttext"><div class="sttext_content"><span class="sttext_span"><b><a href="https://labs.9lessons.info/srinivas">You</a></b> </span>'
+A
+'</div></div></div>';
$(".recordingslist").prepend(B);
}
});
}
updateAudio.php
Inserta el audio en formato Base64 en el newsfeed junto con el id de sesión del usuario.
include('db.php');
$session_id='1';
if($_POST['audiosrc'] && !empty($session_id))
{
$audiosrc=$_POST['audiosrc'];
$query=mysqli_query($db,"INSERT INTO `newsfeed` (`user_id_fk`, `audioMessage`) VALUES ( '$session_id', '$audiosrc')")or die(mysqli_error($db));
}
Así es como se guardaría el audio en nuestra base de datos.
db.php
Necesitamos un archivo de configuración para la conexión con la base de datos, y config.php será el encargado de ello. Mediante este archivo podrás modificar el nombre de usuario, la contraseña e incluso el nombre de la base de datos.
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD,DB_DATABASE) or die(mysqli_connect_error());
$path = "uploads/"; //Images upload folder
Fuente: 9lessons.info