2016-03-21 3 views
0

Я построил плеер для HTML5, который загружает музыку с моего сервера, плеер отлично работает, если я играю песню с самого начала, но когда я пытаюсь воспроизвести песню с определенного времени, используя атрибут currentTime ничего не происходит, и песня начинается с началаhtml5 настройка звука currentTime

Моя серверная сторона - это Java spring mvc, а мой клиент - угловой.

cleint часть:

аудио завод:

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

игрок завода:

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

и когда я добавить песню:

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

    player.play(); 
}); 

и контроллер сервера, чтобы получить песня:

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

этот код работал на некоторое время, а затем перестает работать :(

UPDATE

код отлично работает в крае, но ошибка в хроме 44 и 48

любой Помогите?

ответ

0

Возможно, вам нужно дождаться события «canPlay», прежде чем пытаться изменить время.

С Chrome Desktop и Firefox вы также можете прослушивать «загруженные» события, чтобы сообщить вам, загружен ли файл в точку, к которой вы хотите.

+0

Я пробовал это, но событие canplay срабатывало все время без остановки, поэтому это не помогло, событие загрузки также не сработало. Самое забавное, что он работал отлично, пока несколько дней назад. –

+0

Я знаю, что это был год, так что, возможно, вы решили это по-другому, но есть свойство «поиска» в звуковом тэге, который возвращает диапазон, который можно искать. Это (я полагаю) на основе комбинации состояния буферизации и того, правильно ли сервер отправляет диапазон: заголовки, которым нужен тег. Chrome Android <51 не включает (включая веб-просмотр по умолчанию для FireWox, хотя шелковый браузер, похоже, обновился). –

Смежные вопросы