fix seeking in tracks

soundcloud · Jan 31, 2010 · c9eb947 · c9eb947
1 parent 1ae5504
commit c9eb947
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/css/sc-player.css b/css/sc-player.css
@@ -74,17 +74,17 @@
 
 /* scrubber */
 .sc-scrubber {
-  display: none;
   background-color: red;
   position: absolute;
+  left: -5000px;
   bottom: 10px;
-  left: 10px;
   height: 20px;
   width: 250px;
 }
 
 .sc-player:hover .sc-scrubber {
   display: block;
+  left: 10px;
 }
 
 .sc-scrubber .sc-time-span{

diff --git a/examples/sc-player-example.html b/examples/sc-player-example.html
@@ -18,7 +18,7 @@ <h2>Cool Tracks I've found'</h2>
 
       <!-- <a href="http://sandbox-soundcloud.com/circuitflow/4am" class="sc-player">Hzbens loops</a> -->
 
-       <a href="http://sandbox-soundcloud.com/matas/favorites" class="sc-player">Matas Favorites</a>
+       <!-- <a href="http://sandbox-soundcloud.com/matas/favorites" class="sc-player">Matas Favorites</a> -->
     </div>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
     <script type="text/javascript" src="../js/soundcloud.player.api.js"></script>

diff --git a/js/sc-player.js b/js/sc-player.js
@@ -93,19 +93,18 @@
       },
       play = function(track) {
         var url = track.permalink_url;
-        if(!audioEngine){
-          audioEngine = soundcloud.getPlayer(engineId);
-        }
-        if(currentUrl !== url){
-          currentUrl = url;
-          // console.log('will load', url);
-          audioEngine.api_load(url);
-          autoPlay = true;
-          // FIXME if the ready events from player would work, shouldn't need this one
-          pollForLoad();
-        }else{
-          // console.log('will play');
-          audioEngine.api_play();
+        if(audioEngine){
+          if(currentUrl !== url){
+            currentUrl = url;
+            // console.log('will load', url);
+            audioEngine.api_load(url);
+            autoPlay = true;
+            // FIXME if the ready events from player would work, shouldn't need this one
+            pollForLoad();
+          }else{
+            // console.log('will play');
+            audioEngine.api_play();
+          }
         }
       },
       getPlayerData = function(node) {
@@ -122,14 +121,16 @@
         audioEngine.api_pause();
       },
       onSeek = function(node, relative) {
-        // console.log('onSeek', relative);
-        audioEngine.seek(audioEngine.api_getTrackDuration() * event.relative);
+        audioEngine.api_seekTo((audioEngine.api_getTrackDuration() * relative));
       },
       positionPoll;
 
     // listen to audio events
     soundcloud.addEventListener('onPlayerReady', function(flashId, data) {
       console.log('audio engine is ready');
+      if(!audioEngine){
+        audioEngine = soundcloud.getPlayer(engineId);
+      }
       // FIXME the event doesnt get fired after the load()
       if(autoPlay){      
         this.api_play();
@@ -149,7 +150,13 @@
     });
 
     soundcloud.addEventListener('onMediaPlay', function(flashId, data) {
-      positionPoll = setInterval(function() { updates.position.innerHTML = timecode(audioEngine.api_getTrackPosition() * 1000); }, 50);
+      var duration = audioEngine.api_getTrackDuration() * 1000;
+      clearInterval(positionPoll);
+      positionPoll = setInterval(function() {
+        var position = audioEngine.api_getTrackPosition() * 1000;
+        updates.$played.css('width', ((position / duration) * 100) + '%');
+        updates.position.innerHTML = timecode(position); 
+      }, 50);
     });
 
     soundcloud.addEventListener('onMediaPause', function(flashId, data) {
@@ -266,9 +273,9 @@
   $('.sc-buffer').live('click', function(event) {
     var $buffer = $(this),
         $available = $buffer.closest('.sc-time-span'),
-        $player = $buffer.closest('.sc-player');
-        // console.log(event.pageX  - $available.offset().left, $available.width());
-    onSeek($player, event.pageX  - $available.offset().left / $available.width());
+        $player = $buffer.closest('.sc-player'),
+        relative  = (event.pageX  - $available.offset().left) / $available.width();
+    onSeek($player, relative);
     return false;
   });