2016-03-21 9 views
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

いずれかであります助けて?

答えて

0

時間を変更する前に「canPlay」イベントが発生するのを待つ必要があります。

ChromeデスクトップとFirefoxでは、「ロード済み」のイベントをリッスンして、ファイルがあなたが探しているポイントにロードされているかどうかを知ることができます。

+0

私はそれを試みましたが、canplayイベントはいつも止まっていないので、助けにならなかったので、loadイベントもうまくいきませんでした。面白いのは、それが数日前まで完全にうまくいったということです。 –

+0

私はそれが1年であることを知っています。だから多分あなたはこれを別の方法で解決しましたが、オーディオタグには検索可能な範囲を返す検索可能なプロパティがあります。バッファリングの状態と、タグが必要とする範囲:ヘッダーをサーバーが適切に送信しているかどうかの組み合わせに基づいています(私は推測します)。 ChromeのAndroid <51はありません(FireOSのデフォルトのWebviewを含みますが、シルクブラウザはアップグレードされているようです)。 –

関連する問題