1
0
Fork 0

Added buffering

This commit is contained in:
magnolia-fan 2011-04-14 22:55:39 +04:00
parent 1b135c8ad7
commit be7f9000f3
3 changed files with 27 additions and 2 deletions

View File

@ -13,7 +13,7 @@
<div class="inner-1">
<% if @hide_player.nil? -%>
<div id="player">
<audio autoplay preload></audio>
<div id="audiobox"></div>
<div class="prev" title="Play Previous Track"><img src="/images/player/prev.svg" alt="prv" /></div>
<div class="play" title="Play"><img src="/images/player/play.svg" alt="ply" /></div>
<div class="pause" title="Pause" style="display:none"><img src="/images/player/pause.svg" alt="pause" /></div>

View File

@ -1,4 +1,6 @@
var audio;
var prev_audio;
var next_audio;
var utid;
$(function(){
$.extend($.fn.disableTextSelect = function() {
@ -69,6 +71,11 @@ function updatePlayer() {
progress = Math.round((cur_time / duration) * 390);
$('#player .progress-loaded').css('width', loaded +'px')
$('#player .progress-point').css('margin-left', progress +'px')
/* Starting buffering next track */
if (Math.round(cur_time / duration * 100) > 70) {
addAudio(next_audio);
}
}
utid = window.setTimeout(updatePlayer, 100);
}
@ -79,7 +86,7 @@ function formatTime(sec) {
return m +':'+ (s < 10 ? '0' : '') +s;
}
function playTrack(artist, track, id) {
$(audio).attr('src', '/listen/'+ id +'.mp3');
switchAudio(id);
$('#player .track-title').html(artist +' &mdash; '+ track);
$('#player .time-played').html('0:00');
$('#player .time-left').html('0:00');
@ -130,3 +137,14 @@ function addToPlaylist(artist, track, length, id) {
}
$('#player .playlist .count').html($('#playlist ul.list li').length);
}
function addAudio(id) {
if ($('#audio_'+ id).length == 0) {
$('#audiobox').append('<audio id="audio_'+ id +'" src="/listen/'+ id +'.mp3" preload="preload"></audio>');
}
}
function switchAudio(id) {
if ($('#audio_'+ id).length == 0) {
addAudio(id);
}
audio = document.getElementById('audio_'+ id);
}

View File

@ -1,3 +1,10 @@
audio {
width: 0;
height: 0;
position: absolute;
top: -1000px;
left: -1000px;
}
#player {
position: fixed;
width: 750px;