0
私のサーバーから音楽をダウンロードするHTML5のプレーヤーを作成しましたが、最初の曲を再生するとうまく動作しますが、currentTime属性を使って特定の時間から曲を再生しようとすると何も起こらず、曲が始まりから始まるhtml5オーディオ設定currentTime
私のサーバー側はJava spring mvcで、クライアントはangularJSです。
cleint一部:
オーディオ工場:
tunesApp.factory('audio', function($document) {
var audio = $document[0].createElement('audio');
return audio;
});
プレーヤーの工場:取得する
tunesApp.controller('myController', function(player) {
player.playlist.add({
url: "/path/to/server",
startFrom: 65 // in seconds
});
player.play();
});
とサーバコントローラ:
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;
});
と私は曲を追加するとき歌:
@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
いずれかであります助けて?
私はそれを試みましたが、canplayイベントはいつも止まっていないので、助けにならなかったので、loadイベントもうまくいきませんでした。面白いのは、それが数日前まで完全にうまくいったということです。 –
私はそれが1年であることを知っています。だから多分あなたはこれを別の方法で解決しましたが、オーディオタグには検索可能な範囲を返す検索可能なプロパティがあります。バッファリングの状態と、タグが必要とする範囲:ヘッダーをサーバーが適切に送信しているかどうかの組み合わせに基づいています(私は推測します)。 ChromeのAndroid <51はありません(FireOSのデフォルトのWebviewを含みますが、シルクブラウザはアップグレードされているようです)。 –