Audio Recording with Custom Audio Player using Jquery and HTML5
Wall Script
Follow Me:
Wednesday, March 18, 2015

Audio Recording with Custom Audio Player using Jquery and HTML5

Few days back one of my friend sent me an audio message in Facebook messenger, the moment I was realized that I haven’t covered this audio recording system on 9lessons.info. Today I want to discuss how to publish a voice recording messages on newsfeed using Jquery and HTML5 with custom HTML5 audio player. Take a quick look at the live demo, make sure use the microphone for better result.

Audio Recording with Custom Audio Player using Jquery and HTML5


Download Script     Live Demo

Database
Newsfeed table contains all the user update details.
CREATE TABLE newsfeed(
id INT PRIMARY KEY AUTO_INCREMENT,
userUpdate TEXT,
user_id_fk INT,
audioMessage TEXT,
status ENUM('0','1') DEFAULT '1');

JavaScript
You have to include all these JavaScript library files.
<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>

Custom Audio Player HTML Code
HTML code for custom designed audio player, here the actual HTML5 player is in hidden mode. Number 10 refers to user's session id.
<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>

Audio Recording with Jquery and HTML5

Audio Player CSS
Focus on colored CSS properties.
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
}

Audio JavaScript
Contains JavaScript code $('body').on('click','.audioControl', function()- audioControl is the CLASS name of the DIV tag. Using $(this).attr("id") calling the player ID.
// 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
});

Controlling audio controls with Jquery trigger()


Record Button HTML Code
Contains simple HTML code.
<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>

Audio Recording with Jquery and HTML5

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;
}

Record Button JavaScript
This script calls record.js for recording the 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
Modified and included following code in record.js for storing the audio data in Base64 format.
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
Inserting the audio Base64 data into newsfeed along with user session id.
<?php
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));
}
?>

This way data will store audio data into newsfeed table.
Audio Recording with Jquery and HTML5

db.php
Database connection you have to modify username, password and database values.
<?php
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 
?>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


33 comments:

  1. I will try this great tutorial in my web thanks Srinivas

    ReplyDelete
  2. on pc it works good but on my smartphone when i click on "record" give me the copy & paste function.... how can i disable it???

    ReplyDelete
  3. Great, but don't is working for me, on localhost and on server the time is always zero.

    ReplyDelete
  4. Fantastic! The possibilities are endless. Good job!
    Am your ardent follower from Nigeria.
    IE failed to deliver as usual :D
    Tested Results:
    IE - Not Supported
    Chrome - Supported
    Firefox - Partially Supported
    Safari - Not Supported
    Opera - Not Supported

    ReplyDelete
  5. Use Modernizr for IE support

    http://www.9lessons.info/2012/12/responsive-web-design-css3.html

    ReplyDelete
  6. you are great. thank you for your tutor, i will use it.

    ReplyDelete
  7. Such an awesome thing!! I would wish to try it.. Great tutorials!

    ReplyDelete
  8. I need help for installation. anyone to help me?

    ReplyDelete
  9. Its great that you also maintain mysqli extension in all your latest post.

    ReplyDelete
  10. What about webcam video recording ?

    ReplyDelete
  11. Not supported smartphone

    ReplyDelete
  12. Known issues
    The resulting mp3 recording will be longer by aproximetely 50%. So a 5 seconds recording will have a 10 seconds duration, with the last 5 seconds being empty. This may be caused by a buffer problem.

    We get a loud mic record when we enable mic support.

    ReplyDelete
  13. Download não funciona....só subscribe ao feed burner.

    ReplyDelete
  14. Good and Easy understandable Tutorial Srinivas bro

    ReplyDelete
  15. but the recorded file have GAP! of the same amount of the recorded time

    i mean i have recorded my voice for 10 sec and the sound released was 10 sec + 10 sec of nothing ( 20 sec sound )

    plus the VOice was sooooooooooooooo lowwwwwwwwwwwwwwwwwwwwwww

    ReplyDelete
    Replies
    1. am facing same issue, please help me if you have any solutions. That problem is also on demo page

      Delete
  16. can someone add this to my wall script v7 please?

    ReplyDelete
  17. Great Idea very Informative for me, Thanks for Nice tutorial.

    ReplyDelete
  18. I realy enjoyed your articles and sharing the information with my friends

    ReplyDelete
  19. its good script.I want to hidden voice record on my own website. can it be possible?

    ReplyDelete
  20. i've subscribe but still can't download, why?

    ReplyDelete
  21. i've verified my email and still can't download please help me.

    ReplyDelete
  22. Great idea, but on smartphones dont working.

    ReplyDelete
  23. it working but not work properly way.

    ReplyDelete
  24. how to solve the sound echo problem

    ReplyDelete

Make in India