localhots/oldhaven
1
0
Fork 0
Code Releases Activity

Added buffering

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/layouts/application.html.erb
View File

@ -13,7 +13,7 @@
<div class="inner-1"> <div class="inner-1">
<% if @hide_player.nil? -%> <% if @hide_player.nil? -%>
<div id="player"> <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="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="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> <div class="pause" title="Pause" style="display:none"><img src="/images/player/pause.svg" alt="pause" /></div>

20
public/javascripts/player.js
View File

@ -1,4 +1,6 @@
var audio; var audio;
var prev_audio;
var next_audio;
var utid; var utid;
$(function(){ $(function(){
$.extend($.fn.disableTextSelect = function() { $.extend($.fn.disableTextSelect = function() {
@ -69,6 +71,11 @@ function updatePlayer() {
progress = Math.round((cur_time / duration) * 390); progress = Math.round((cur_time / duration) * 390);
$('#player .progress-loaded').css('width', loaded +'px') $('#player .progress-loaded').css('width', loaded +'px')
$('#player .progress-point').css('margin-left', progress +'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); utid = window.setTimeout(updatePlayer, 100);
} }
@ -79,7 +86,7 @@ function formatTime(sec) {
return m +':'+ (s < 10 ? '0' : '') +s; return m +':'+ (s < 10 ? '0' : '') +s;
} }
function playTrack(artist, track, id) { function playTrack(artist, track, id) {
$(audio).attr('src', '/listen/'+ id +'.mp3'); switchAudio(id);
$('#player .track-title').html(artist +' &mdash; '+ track); $('#player .track-title').html(artist +' &mdash; '+ track);
$('#player .time-played').html('0:00'); $('#player .time-played').html('0:00');
$('#player .time-left').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); $('#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);
}

7
public/stylesheets/player.css
View File

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