javascript php help

[FrankGalos]

Hello freaks i m trying to make a simple upload application that upload audio files and video files it working fine in uploading and displaying data from the database but i got a problem in playing audio and video file on my player . The program is like this it take audio reference file from the database and when data are collected HTML 5 play via javascript play it part and it working fine  but the problem that when i click play of the first row name on database it playing but when i click play another song it play the first song row in the database and i have no cruel on this please help: here the code

$sql = "SELECT * FROM music ORDER BY id DESC";
        $q=$con->query($sql);
        if($q->num_rows > 0){
    while ($row = $q->fetch_array()){
    $id = $row['id'];
    $name = $row['name'];
    $type = $row['type'];
    $fileLoc = "MUPLOADS/";
    $desc = $row['description'];

html code

<span id="by" title="uploaded by <?php echo $name;?>"><?php echo 'Uploaded by '.$name;?></span>
                <span id="controlers"><img src="images/icons/play.png" alt="play" id="play" onclick="playpause()"><img src="images/icons/pause.png" alt="pause" onclick="playpause()" id="pause">
                    <audio src="<?php echo $fileLoc.$file.'.mp3';?>" id='myaudio'></audio>
                </span>

Edited August 8, 2015 by Ch0cu3r
Added code tags

[Ch0cu3r]

Can you also show the javascript code for the playpause() function

 

Also when posting code please wrap it within

tags or click <> button in the editor

[FrankGalos]

here the javascript  code

var audio,progressi,curTime,durTime,play,pause,playpaus;

function initializer(){
    audio = _('myaudio');
    progressi =_('progressBar');
    pause = _('pause');
    play =_('play');
    curTime = _('curTime');
    durTime = _('durTime');
    
    progressi.addEventListener('change', progress,false);
    audio.addEventListener('timeupdate',seekTime,false);
}

window.onload  = initializer;

function playpause() {
    
    if(audio.paused){
        audio.play();
        play.style.display='none';
        pause.style.display='block';
    }else{
        audio.pause();
        play.style.display='block';
        pause.style.display='none';
    }
}


function progress(){
    
    var percent = audio.duration *(progressi.value / 100);
    audio.currentTime = percent;
}


function seekTime(){
    var nt = audio.currentTime *(100/ audio.duration);
    progressi.value = nt;
    var curMins =  Math.floor(audio.currentTime / 60);
    var curSec = Math.floor(audio.currentTime - curMins * 60 );
    var duMins = Math.floor(audio.duration / 60);
    var duSec =  Math.round(audio.duration - duMins * 60);

    if(curMins < 10){curMins = '0'+curMins;}

    if(curSec < 10){curSec = '0'+curSec;}

   if (duMins < 10) {duMins = '0'+duMins;}

    if (duSec < 10) {duSec = '0'+duSec;}

    curTime.innerHTML = curMins+':'+curSec;
    durTime.innerHTML = duMins+':'+duSec;
}

Edited August 9, 2015 by Ch0cu3r