HTML 5 audio tag , paused song always plays from the begining

Question

I am trying to implement the play pause functionality in HTML 5 audio tag

Here is my tag :

 <audio  id="player">
            </audio>

I am providing the audio src using an api ,which populates a array object 'playlist' , the function for the loading the audio source is :

function loadTrack(num)
    {

        $('#player')[0].src = playlist[num].stream;

        trackID = playlist[num].id;
        sendTrackInfo(num);
        performAction('continue');


    }

The code which does the control in actuality is this(I have shown the entire function just incase, but I guess we need to deal just with 'pause' and 'play' node) :

function performAction(input)
    {

        switch(input)
        {
            case 'pause':   
                currentTime= getCurrentTime();                                                                
                $('#player')[0].pause();
                uiObj['controls'].performAction('pause');
                playing=false;
                break;
            case 'play':


                setCurrentTime(currentTime);

                console.log(getCurrentTime());    //Here the output is proper i.e current time
                loadTrack(trackNum);
                $('#player')[0].play();

                uiObj['controls'].performAction('play');
                playing=true;   
            case 'previous':
                if($('#player')[0].currentTime > 3)
                {
                    $('#player')[0].currentTime = 0;
                    return;
                }
                else if(repeat)
                {
                    $('#player')[0].currentTime = 0;
                    performAction('continue');
                }
                else
                {
                    trackNum --;

                    if(trackNum < 0)
                    {
                        performAction('reset');
                    }
                    else
                    {
                        loadTrack(trackNum);
                    }
                }
                break;
            case 'next':
                if(repeat)
                {
                    $('#player')[0].currentTime = 0;
                    performAction('continue');
                }
                else
                {
                    trackNum ++;

                    if(trackNum >= trackTotal)
                    {
                        trackNum = 0;
                        loadTrack(trackNum);

                        if(!repeatAll)
                        {
                            performAction('pause');
                        }
                    }
                    else
                    {
                        loadTrack(trackNum);
                    }
                }
                break;
            case 'repeat':
                if(!repeat && !repeatAll)
                {
                    repeat = true;
                    uiObj['controls'].performAction('repeat');
                }
                else if(repeat)
                {
                    repeat = false;
                    repeatAll = true;
                    uiObj['controls'].performAction('repeatAll');
                }
                else
                {
                    repeatAll = false;
                    uiObj['controls'].performAction('repeatNone');
                }
                break;
            case 'shuffle':
                var playlistcopy;
                var r;

                shuffle = !shuffle;
                if(shuffle)
                {
                    playlistcopy = playlist.slice(0);
                    playlist = [];

                    for (var i = 0; i < trackTotal; i++)
                    {
                        r = Math.floor(Math.random() * (playlistcopy.length));
                        playlist.push(playlistcopy[r]);
                        playlistcopy.splice(r,1);
                    }

                    setTrackNum(true);
                    uiObj['trackInfo'].updateUI();
                    uiObj['controls'].performAction('shuffle');
                }
                else
                {
                    playlist = scObj.getBaseTracks();

                    setTrackNum(false);
                    uiObj['trackInfo'].updateUI();
                    uiObj['controls'].performAction('unshuffle');
                }
                break;
            case 'continue':
                if(playing) $('#player')[0].play();
                else $('#player')[0].pause();
                break;
            case 'ended':
                if(repeat) 
                {
                    performAction('restart');
                }
                else
                {
                    performAction('next');
                }
                break;
            case 'restart':
                $('#player')[0].currentTime = 0;
                $('#player')[0].play();
                break;
            case 'reset':
                playlist = scObj.getBaseTracks();
                setTrackNum(false);
                uiObj['trackInfo'].updateUI();
                uiObj['controls'].performAction('unshuffle');

                repeat = false;
                repeatAll = false;
                uiObj['controls'].performAction('repeatNone');

                trackNum = 0;
                loadTrack(trackNum);
                break;
            case 'reload':
                playlist = scObj.getBaseTracks();
                trackNum = 0;
                trackTotal = playlist.length;
                loadTrack(trackNum);
                performAction('continue');
                break;
            default:
                break;
        }
    }

The trouble the songs play fine ,with the functinalities working ,but when I pause and try to play a song again it starts from the begining rather than the paused time.

Thanks in advance.

Answer 1

Similar question here : Setting HTML5 audio position

You might have to ensure the browser is ready to play by listening to the 'canplay' event