html5 audio setting currentTime

Question

I built a player for HTML5 that download the music from my server, the player works just fine if i play the song from the begining but when i try to play a song from a specific time using the currentTime attribute nothing happen and the song start from the begining

my server side is Java spring mvc, and my client is angularJS.

cleint part:

audio factory:

tunesApp.factory('audio', function($document) {
    var audio = $document[0].createElement('audio');
    return audio;
});

player factory:

tunesApp.factory('player', function(audio, $rootScope) {
    var player,
        playlist = [],
        current = {
          track: 0
        };

    player = {
      playlist:playlist,
      play: function(track) {
        if (!playlist.length) return;

        if (angular.isDefined(track)) current.track = track;

        audio.src = playlist[current.track].url;
        audio.currentTime = playlist[current.track].startFrom; // also try with .toString()
        audio.play();
      }
    };

    playlist.add = function(album) {
      if (playlist.indexOf(album) != -1) return;
      playlist.push(album);
    };

    playlist.remove = function(album) {
      var index = playlist.indexOf(album);
      if (index == current.album) player.reset();
      playlist.splice(index, 1);
    };

    return player;
});

and when i add song:

tunesApp.controller('myController', function(player) {
    player.playlist.add({
        url: "/path/to/server",
        startFrom: 65 // in seconds
    });

    player.play();
});

and the server controller to get the song:

@RequestMapping(path="/song/{file_id}", method=RequestMethod.GET)
public void getFile(@PathVariable("file_id") String fileId, HttpServletResponse response){
    try{
        // get the song from the DB
        String songName = DB.getSong(fileId);
        File file = new File(fullPath + songName);
        response.setContentType("audio/mpeg"); // i use only mp3 files
        Long length = file.length();
        response.addHeader("Content-Range", "bytes 0-" + new Long(length-1).toString()+"/"+length);
        response.setContentLength((int)length);
        InputStream inputStream = new BufferInputStream(new FileInputStream(file));
        FileCopyUtils.copy(inputStream,response.getOutputStream());

        response.flushBuffer();
    }catch(Exception ex){}
}

this code worked for a while and then stop working :(

UPDATE

the code works perfectly in edge but the bug is in chrome 44 and 48

any help?

Answer 1

You probably need to wait for a "canPlay" event to fire before attempting to change the time.

With Chrome Desktop and Firefox, you can also listen for 'loaded' events to tell you if the file has loaded to the point that you are seeking to.