Запись аудио на собственном плеере средствами jQuery и HTML5

CREATE TABLE newsfeed(
id INT PRIMARY KEY AUTO_INCREMENT,
userUpdate TEXT,
user_id_fk INT,
audioMessage TEXT,
status ENUM('0','1') DEFAULT '1');

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

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

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

$("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.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');
        }
    });
});

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

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

$("body").on('click','.recordOn',function()
{
    $("#recordContainer").toggle();
});
$("#recordCircle").mousedown(function()
{
    $(this).removeClass('startRecord').addClass('stopRecord');
    $("#recordContainer").removeClass('startContainer').addClass('stopContainer');
    $("#recordText").html("Stop");
    $.stopwatch.startTimer('sw'); // Старт таймера
    startRecording(this); // Начала записи
}).mouseup(function()
{
    $.stopwatch.resetTimer(); // Сброс таймера
    $(this).removeClass('stopRecord').addClass('startRecord');
    $("#recordContainer").removeClass('stopContainer').addClass('startContainer');
    $("#recordText").html("Record");
    stopRecording(this); // Остановка записи
});

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

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

<?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/";
?>