soundcloud-custom-player-rails 1.0.0

data/.gitignore

@@ -0,0 +1,20 @@
+*.gem
+*.rbc
+.bundle
+.config
+coverage
+InstalledFiles
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+
+# YARD artifacts
+.yardoc
+_yardoc
+doc/
+.DS_Store
+Gemfile.lock

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in ..gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Daniël van de Burgt
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,35 @@
+soundcloud-custom-player-rails
+==============================
+
+Soundcloud Custom Player integration for Rails asset pipeline.
+See https://github.com/soundcloud/soundcloud-custom-player for more info.
+
+Installation
+------------
+
+Gemfile:
+
+    group :assets do
+      gem 'soundcloud-custom-player-rails'
+    end
+
+Or get the latest build:
+
+    group :assets do
+      gem 'soundcloud-custom-player-rails',
+        :require => 'soundcloud-custom-player-rails',
+        :git => 'git://github.com/thatdutchguy/soundcloud-custom-player-rails.git'
+    end
+
+js:
+
+    //= require soundcloud.player.api
+    //= require sc-player
+
+css:
+
+    @import "sc-player-standard/standards";
+    @import "sc-player-standard/structure-horizontal";
+    @import "sc-player-standard/colors-orange";
+
+Included are multiple players/css combinations, see https://github.com/thatdutchguy/soundcloud-custom-player-rails/tree/master/vendor/assets/stylesheets too see what's available.

data/Rakefile

@@ -0,0 +1 @@
+require "bundler/gem_tasks"

data/lib/soundcloud-custom-player-rails.rb

@@ -0,0 +1,12 @@
+require "rails"
+require "soundcloud-custom-player-rails/version"
+
+module SoundcloudCustomPlayerRails
+  module Rails
+    if ::Rails.version < "3.1"
+      require "soundcloud-custom-player-rails/railtie"
+    else
+      require "soundcloud-custom-player-rails/engine"
+    end
+  end
+end

data/lib/soundcloud-custom-player-rails/engine.rb

@@ -0,0 +1,6 @@
+module SoundcloudCustomPlayerRails
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/soundcloud-custom-player-rails/railtie.rb

@@ -0,0 +1,6 @@
+module SoundcloudCustomPlayerRails
+  module Rails
+    class Railtie < ::Rails::Railtie
+    end
+  end
+end

data/lib/soundcloud-custom-player-rails/version.rb

@@ -0,0 +1,3 @@
+module SoundcloudCustomPlayerRails
+  VERSION = "1.0.0"
+end

data/soundcloud-custom-player-rails.gemspec

@@ -0,0 +1,17 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'soundcloud-custom-player-rails/version'
+
+Gem::Specification.new do |gem|
+  gem.name          = "soundcloud-custom-player-rails"
+  gem.version       = SoundcloudCustomPlayerRails::VERSION
+  gem.authors       = ["Daniël van de Burgt"]
+  gem.email         = ["thatdutchguy@secretlymexico.com"]
+  gem.description   = %q{Soundcloud Custom Player assets for Rails}
+  gem.summary       = gem.description
+  gem.homepage      = "http://github.com/thatdutchguy/soundcloud-custom-player-rails"
+
+  gem.files         = `git ls-files`.split($/)
+  gem.require_paths = ["lib"]
+end

data/vendor/assets/javascripts/sc-player.js

@@ -0,0 +1,725 @@
+/*
+*   SoundCloud Custom Player jQuery Plugin
+*   Author: Matas Petrikas, matas@soundcloud.com
+*   Copyright (c) 2009  SoundCloud Ltd.
+*   Licensed under the MIT license:
+*   http://www.opensource.org/licenses/mit-license.php
+*
+*   Usage:
+*   <a href="http://soundcloud.com/matas/hobnotropic" class="sc-player">My new dub track</a>
+*   The link will be automatically replaced by the HTML based player
+*/
+(function($) {
+  // Convert milliseconds into Hours (h), Minutes (m), and Seconds (s)
+  var timecode = function(ms) {
+    var hms = function(ms) {
+          return {
+            h: Math.floor(ms/(60*60*1000)),
+            m: Math.floor((ms/60000) % 60),
+            s: Math.floor((ms/1000) % 60)
+          };
+        }(ms),
+        tc = []; // Timecode array to be joined with '.'
+
+    if (hms.h > 0) {
+      tc.push(hms.h);
+    }
+
+    tc.push((hms.m < 10 && hms.h > 0 ? "0" + hms.m : hms.m));
+    tc.push((hms.s < 10  ? "0" + hms.s : hms.s));
+
+    return tc.join('.');
+  };
+  // shuffle the array
+  var shuffle = function(arr) {
+    arr.sort(function() { return 1 - Math.floor(Math.random() * 3); } );
+    return arr;
+  };
+
+  var debug = true,
+      useSandBox = false,
+      $doc = $(document),
+      log = function(args) {
+        try {
+          if(debug && window.console && window.console.log){
+            window.console.log.apply(window.console, arguments);
+          }
+        } catch (e) {
+          // no console available
+        }
+      },
+      domain = useSandBox ? 'sandbox-soundcloud.com' : 'soundcloud.com',
+      secureDocument = (document.location.protocol === 'https:'),
+      // convert a SoundCloud resource URL to an API URL
+      scApiUrl = function(url, apiKey) {
+        var resolver = ( secureDocument || (/^https/i).test(url) ? 'https' : 'http') + '://api.' + domain + '/resolve?url=',
+            params = 'format=json&consumer_key=' + apiKey +'&callback=?';
+
+        // force the secure url in the secure environment
+        if( secureDocument ) {
+          url = url.replace(/^http:/, 'https:');
+        }
+
+        // check if it's already a resolved api url
+        if ( (/api\./).test(url) ) {
+          return url + '?' + params;
+        } else {
+          return resolver + url + '&' + params;
+        }
+      };
+
+  // TODO Expose the audio engine, so it can be unit-tested
+  var audioEngine = function() {
+    var html5AudioAvailable = function() {
+        var state = false;
+        try{
+          var a = new Audio();
+          state = a.canPlayType && (/maybe|probably/).test(a.canPlayType('audio/mpeg'));
+          // uncomment the following line, if you want to enable the html5 audio only on mobile devices
+          // state = state && (/iPad|iphone|mobile|pre\//i).test(navigator.userAgent);
+        }catch(e){
+          // there's no audio support here sadly
+        }
+
+        return state;
+    }(),
+    callbacks = {
+      onReady: function() {
+        $doc.trigger('scPlayer:onAudioReady');
+      },
+      onPlay: function() {
+        $doc.trigger('scPlayer:onMediaPlay');
+      },
+      onPause: function() {
+        $doc.trigger('scPlayer:onMediaPause');
+      },
+      onEnd: function() {
+        $doc.trigger('scPlayer:onMediaEnd');
+      },
+      onBuffer: function(percent) {
+        $doc.trigger({type: 'scPlayer:onMediaBuffering', percent: percent});
+      }
+    };
+
+    var html5Driver = function() {
+      var player = new Audio(),
+          onTimeUpdate = function(event){
+            var obj = event.target,
+                buffer = ((obj.buffered.length && obj.buffered.end(0)) / obj.duration) * 100;
+            // ipad has no progress events implemented yet
+            callbacks.onBuffer(buffer);
+            // anounce if it's finished for the clients without 'ended' events implementation
+            if (obj.currentTime === obj.duration) { callbacks.onEnd(); }
+          },
+          onProgress = function(event) {
+            var obj = event.target,
+                buffer = ((obj.buffered.length && obj.buffered.end(0)) / obj.duration) * 100;
+            callbacks.onBuffer(buffer);
+          };
+
+      $('<div class="sc-player-engine-container"></div>').appendTo(document.body).append(player);
+
+      // prepare the listeners
+      player.addEventListener('play', callbacks.onPlay, false);
+      player.addEventListener('pause', callbacks.onPause, false);
+      // handled in the onTimeUpdate for now untill all the browsers support 'ended' event
+      // player.addEventListener('ended', callbacks.onEnd, false);
+      player.addEventListener('timeupdate', onTimeUpdate, false);
+      player.addEventListener('progress', onProgress, false);
+
+
+      return {
+        load: function(track, apiKey) {
+          player.pause();
+          player.src = track.stream_url + (/\?/.test(track.stream_url) ? '&' : '?') + 'consumer_key=' + apiKey;
+          player.load();
+          player.play();
+        },
+        play: function() {
+          player.play();
+        },
+        pause: function() {
+          player.pause();
+        },
+        stop: function(){
+          if (player.currentTime) {
+            player.currentTime = 0;
+            player.pause();
+          }
+        },
+        seek: function(relative){
+          player.currentTime = player.duration * relative;
+          player.play();
+        },
+        getDuration: function() {
+          return player.duration * 1000;
+        },
+        getPosition: function() {
+          return player.currentTime * 1000;
+        },
+        setVolume: function(val) {
+          player.volume = val / 100;
+        }
+      };
+
+    };
+
+
+
+    var flashDriver = function() {
+      var engineId = 'scPlayerEngine',
+          player,
+          flashHtml = function(url) {
+            var swf = (secureDocument ? 'https' : 'http') + '://player.' + domain +'/player.swf?url=' + url +'&amp;enable_api=true&amp;player_type=engine&amp;object_id=' + engineId;
+            if ($.browser.msie) {
+              return '<object height="100%" width="100%" id="' + engineId + '" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" data="' + swf + '">'+
+                '<param name="movie" value="' + swf + '" />'+
+                '<param name="allowscriptaccess" value="always" />'+
+                '</object>';
+            } else {
+              return '<object height="100%" width="100%" id="' + engineId + '">'+
+                '<embed allowscriptaccess="always" height="100%" width="100%" src="' + swf + '" type="application/x-shockwave-flash" name="' + engineId + '" />'+
+                '</object>';
+            }
+          };
+
+
+      // listen to audio engine events
+      // when the loaded track is ready to play
+      soundcloud.addEventListener('onPlayerReady', function(flashId, data) {
+        player = soundcloud.getPlayer(engineId);
+        callbacks.onReady();
+      });
+
+      // when the loaded track finished playing
+      soundcloud.addEventListener('onMediaEnd', callbacks.onEnd);
+
+      // when the loaded track is still buffering
+      soundcloud.addEventListener('onMediaBuffering', function(flashId, data) {
+        callbacks.onBuffer(data.percent);
+      });
+
+      // when the loaded track started to play
+      soundcloud.addEventListener('onMediaPlay', callbacks.onPlay);
+
+      // when the loaded track is was paused
+      soundcloud.addEventListener('onMediaPause', callbacks.onPause);
+
+      return {
+        load: function(track) {
+          var url = track.uri;
+          if(player){
+            player.api_load(url);
+          }else{
+            // create a container for the flash engine (IE needs this to operate properly)
+            $('<div class="sc-player-engine-container"></div>').appendTo(document.body).html(flashHtml(url));
+          }
+        },
+        play: function() {
+          player && player.api_play();
+        },
+        pause: function() {
+          player && player.api_pause();
+        },
+        stop: function(){
+          player && player.api_stop();
+        },
+        seek: function(relative){
+          player && player.api_seekTo((player.api_getTrackDuration() * relative));
+        },
+        getDuration: function() {
+          return player && player.api_getTrackDuration && player.api_getTrackDuration() * 1000;
+        },
+        getPosition: function() {
+          return player && player.api_getTrackPosition && player.api_getTrackPosition() * 1000;
+        },
+        setVolume: function(val) {
+          if(player && player.api_setVolume){
+            player.api_setVolume(val);
+          }
+        }
+
+      };
+    };
+
+    return html5AudioAvailable? html5Driver() : flashDriver();
+
+  }();
+
+
+
+  var apiKey,
+      didAutoPlay = false,
+      players = [],
+      updates = {},
+      currentUrl,
+      loadTracksData = function($player, links, key) {
+        var index = 0,
+            playerObj = {node: $player, tracks: []},
+            loadUrl = function(link) {
+              var apiUrl = scApiUrl(link.url, apiKey);
+              $.getJSON(apiUrl, function(data) {
+                // log('data loaded', link.url, data);
+                index += 1;
+                if(data.tracks){
+                  // log('data.tracks', data.tracks);
+                  playerObj.tracks = playerObj.tracks.concat(data.tracks);
+                }else if(data.duration){
+                  // a secret link fix, till the SC API returns permalink with secret on secret response
+                  data.permalink_url = link.url;
+                  // if track, add to player
+                  playerObj.tracks.push(data);
+                }else if(data.creator){
+                  // it's a group!
+                  links.push({url:data.uri + '/tracks'});
+                }else if(data.username){
+                  // if user, get his tracks or favorites
+                  if(/favorites/.test(link.url)){
+                    links.push({url:data.uri + '/favorites'});
+                  }else{
+                    links.push({url:data.uri + '/tracks'});
+                  }
+                }else if($.isArray(data)){
+                  playerObj.tracks = playerObj.tracks.concat(data);
+                }
+                if(links[index]){
+                  // if there are more track to load, get them from the api
+                  loadUrl(links[index]);
+                }else{
+                  // if loading finishes, anounce it to the GUI
+                  playerObj.node.trigger({type:'onTrackDataLoaded', playerObj: playerObj, url: apiUrl});
+                }
+             });
+           };
+        // update current API key
+        apiKey = key;
+        // update the players queue
+        players.push(playerObj);
+        // load first tracks
+        loadUrl(links[index]);
+      },
+      artworkImage = function(track, usePlaceholder) {
+        if(usePlaceholder){
+          return '<div class="sc-loading-artwork">Loading Artwork</div>';
+        }else if (track.artwork_url) {
+          return '<img src="' + track.artwork_url.replace('-large', '-t300x300') + '"/>';
+        }else{
+          return '<div class="sc-no-artwork">No Artwork</div>';
+        }
+      },
+      updateTrackInfo = function($player, track) {
+        // update the current track info in the player
+        // log('updateTrackInfo', track);
+        $('.sc-info', $player).each(function(index) {
+          $('h3', this).html('<a href="' + track.permalink_url +'">' + track.title + '</a>');
+          $('h4', this).html('by <a href="' + track.user.permalink_url +'">' + track.user.username + '</a>');
+          $('p', this).html(track.description || 'no Description');
+        });
+        // update the artwork
+        $('.sc-artwork-list li', $player).each(function(index) {
+          var $item = $(this),
+              itemTrack = $item.data('sc-track');
+
+          if (itemTrack === track) {
+            // show track artwork
+            $item
+              .addClass('active')
+              .find('.sc-loading-artwork')
+                .each(function(index) {
+                  // if the image isn't loaded yet, do it now
+                  $(this).removeClass('sc-loading-artwork').html(artworkImage(track, false));
+                });
+          }else{
+            // reset other artworks
+            $item.removeClass('active');
+          }
+        });
+        // update the track duration in the progress bar
+        $('.sc-duration', $player).html(timecode(track.duration));
+        // put the waveform into the progress bar
+        $('.sc-waveform-container', $player).html('<img src="' + track.waveform_url +'" />');
+
+        $player.trigger('onPlayerTrackSwitch.scPlayer', [track]);
+      },
+      play = function(track) {
+        var url = track.permalink_url;
+        if(currentUrl === url){
+          // log('will play');
+          audioEngine.play();
+        }else{
+          currentUrl = url;
+          // log('will load', url);
+          audioEngine.load(track, apiKey);
+        }
+      },
+      getPlayerData = function(node) {
+        return players[$(node).data('sc-player').id];
+      },
+      updatePlayStatus = function(player, status) {
+        if(status){
+          // reset all other players playing status
+          $('div.sc-player.playing').removeClass('playing');
+        }
+        $(player)
+          .toggleClass('playing', status)
+          .trigger((status ? 'onPlayerPlay' : 'onPlayerPause'));
+      },
+      onPlay = function(player, id) {
+        var track = getPlayerData(player).tracks[id || 0];
+        updateTrackInfo(player, track);
+        // cache the references to most updated DOM nodes in the progress bar
+        updates = {
+          $buffer: $('.sc-buffer', player),
+          $played: $('.sc-played', player),
+          position:  $('.sc-position', player)[0]
+        };
+        updatePlayStatus(player, true);
+        play(track);
+      },
+      onPause = function(player) {
+        updatePlayStatus(player, false);
+        audioEngine.pause();
+      },
+      onFinish = function() {
+        var $player = updates.$played.closest('.sc-player'),
+            $nextItem;
+        // update the scrubber width
+        updates.$played.css('width', '0%');
+        // show the position in the track position counter
+        updates.position.innerHTML = timecode(0);
+        // reset the player state
+        updatePlayStatus($player, false);
+        // stop the audio
+        audioEngine.stop();
+        $player.trigger('onPlayerTrackFinish');
+      },
+      onSeek = function(player, relative) {
+        audioEngine.seek(relative);
+        $(player).trigger('onPlayerSeek');
+      },
+      onSkip = function(player) {
+        var $player = $(player);
+        // continue playing through all players
+        log('track finished get the next one');
+        $nextItem = $('.sc-trackslist li.active', $player).next('li');
+        // try to find the next track in other player
+        if(!$nextItem.length){
+          $nextItem = $player.nextAll('div.sc-player:first').find('.sc-trackslist li.active');
+        }
+        $nextItem.click();
+      },
+      soundVolume = function() {
+        var vol = 80,
+            cooks = document.cookie.split(';'),
+            volRx = new RegExp('scPlayer_volume=(\\d+)');
+        for(var i in cooks){
+          if(volRx.test(cooks[i])){
+            vol = parseInt(cooks[i].match(volRx)[1], 10);
+            break;
+          }
+        }
+        return vol;
+      }(),
+      onVolume = function(volume) {
+        var vol = Math.floor(volume);
+        // save the volume in the cookie
+        var date = new Date();
+        date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
+        soundVolume = vol;
+        document.cookie = ['scPlayer_volume=', vol, '; expires=', date.toUTCString(), '; path="/"'].join('');
+        // update the volume in the engine
+        audioEngine.setVolume(soundVolume);
+      },
+      positionPoll;
+
+    // listen to audio engine events
+    $doc
+      .bind('scPlayer:onAudioReady', function(event) {
+        log('onPlayerReady: audio engine is ready');
+        audioEngine.play();
+        // set initial volume
+        onVolume(soundVolume);
+      })
+      // when the loaded track started to play
+      .bind('scPlayer:onMediaPlay', function(event) {
+        clearInterval(positionPoll);
+        positionPoll = setInterval(function() {
+          var duration = audioEngine.getDuration(),
+              position = audioEngine.getPosition(),
+              relative = (position / duration);
+
+          // update the scrubber width
+          updates.$played.css('width', (100 * relative) + '%');
+          // show the position in the track position counter
+          updates.position.innerHTML = timecode(position);
+          // announce the track position to the DOM
+          $doc.trigger({
+            type: 'onMediaTimeUpdate.scPlayer',
+            duration: duration,
+            position: position,
+            relative: relative
+          });
+        }, 500);
+      })
+      // when the loaded track is was paused
+      .bind('scPlayer:onMediaPause', function(event) {
+        clearInterval(positionPoll);
+        positionPoll = null;
+      })
+      // change the volume
+      .bind('scPlayer:onVolumeChange', function(event) {
+        onVolume(event.volume);
+      })
+      .bind('scPlayer:onMediaEnd', function(event) {
+        onFinish();
+      })
+      .bind('scPlayer:onMediaBuffering', function(event) {
+        updates.$buffer.css('width', event.percent + '%');
+      });
+
+
+  // Generate custom skinnable HTML/CSS/JavaScript based SoundCloud players from links to SoundCloud resources
+  $.scPlayer = function(options, node) {
+    var opts = $.extend({}, $.scPlayer.defaults, options),
+        playerId = players.length,
+        $source = node && $(node),
+        sourceClasses = $source[0].className.replace('sc-player', ''),
+        links = opts.links || $.map($('a', $source).add($source.filter('a')), function(val) { return {url: val.href, title: val.innerHTML}; }),
+        $player = $('<div class="sc-player loading"></div>').data('sc-player', {id: playerId}),
+        $artworks = $('<ol class="sc-artwork-list"></ol>').appendTo($player),
+        $info = $('<div class="sc-info"><h3></h3><h4></h4><p></p><a href="#" class="sc-info-close">X</a></div>').appendTo($player),
+        $controls = $('<div class="sc-controls"></div>').appendTo($player),
+        $list = $('<ol class="sc-trackslist"></ol>').appendTo($player);
+
+        // add the classes of the source node to the player itself
+        // the players can be indvidually styled this way
+        if(sourceClasses || opts.customClass){
+          $player.addClass(sourceClasses).addClass(opts.customClass);
+        }
+
+
+        // adding controls to the player
+        $player
+          .find('.sc-controls')
+            .append('<a href="#play" class="sc-play">Play</a> <a href="#pause" class="sc-pause hidden">Pause</a>')
+          .end()
+          .append('<a href="#info" class="sc-info-toggle">Info</a>')
+          .append('<div class="sc-scrubber"></div>')
+            .find('.sc-scrubber')
+              .append('<div class="sc-volume-slider"><span class="sc-volume-status" style="width:' + soundVolume +'%"></span></div>')
+              .append('<div class="sc-time-span"><div class="sc-waveform-container"></div><div class="sc-buffer"></div><div class="sc-played"></div></div>')
+              .append('<div class="sc-time-indicators"><span class="sc-position"></span> | <span class="sc-duration"></span></div>');
+
+        // load and parse the track data from SoundCloud API
+        loadTracksData($player, links, opts.apiKey);
+        // init the player GUI, when the tracks data was laoded
+        $player.bind('onTrackDataLoaded.scPlayer', function(event) {
+          // log('onTrackDataLoaded.scPlayer', event.playerObj, playerId, event.target);
+          var tracks = event.playerObj.tracks;
+          if (opts.randomize) {
+            tracks = shuffle(tracks);
+          }
+          // create the playlist
+          $.each(tracks, function(index, track) {
+            var active = index === 0;
+            // create an item in the playlist
+            $('<li><a href="' + track.permalink_url +'">' + track.title + '</a><span class="sc-track-duration">' + timecode(track.duration) + '</span></li>').data('sc-track', {id:index}).toggleClass('active', active).appendTo($list);
+            // create an item in the artwork list
+            $('<li></li>')
+              .append(artworkImage(track, index >= opts.loadArtworks))
+              .appendTo($artworks)
+              .toggleClass('active', active)
+              .data('sc-track', track);
+          });
+          // update the element before rendering it in the DOM
+          $player.each(function() {
+            if($.isFunction(opts.beforeRender)){
+              opts.beforeRender.call(this, tracks);
+            }
+          });
+          // set the first track's duration
+          $('.sc-duration', $player)[0].innerHTML = timecode(tracks[0].duration);
+          $('.sc-position', $player)[0].innerHTML = timecode(0);
+          // set up the first track info
+          updateTrackInfo($player, tracks[0]);
+
+          // if continous play enabled always skip to the next track after one finishes
+          if (opts.continuePlayback) {
+            $player.bind('onPlayerTrackFinish', function(event) {
+              onSkip($player);
+            });
+          }
+
+          // announce the succesful initialization
+          $player
+            .removeClass('loading')
+            .trigger('onPlayerInit');
+
+          // if auto play is enabled and it's the first player, start playing
+          if(opts.autoPlay && !didAutoPlay){
+            onPlay($player);
+            didAutoPlay = true;
+          }
+        });
+
+
+    // replace the DOM source (if there's one)
+    $source.each(function(index) {
+      $(this).replaceWith($player);
+    });
+
+    return $player;
+  };
+
+  // stop all players, might be useful, before replacing the player dynamically
+  $.scPlayer.stopAll = function() {
+    $('.sc-player.playing a.sc-pause').click();
+  };
+
+  // destroy all the players and audio engine, usefull when reloading part of the page and audio has to stop
+  $.scPlayer.destroy = function() {
+    $('.sc-player, .sc-player-engine-container').remove();
+  };
+
+  // plugin wrapper
+  $.fn.scPlayer = function(options) {
+    // reset the auto play
+    didAutoPlay = false;
+    // create the players
+    this.each(function() {
+      $.scPlayer(options, this);
+    });
+    return this;
+  };
+
+  // default plugin options
+  $.scPlayer.defaults = $.fn.scPlayer.defaults = {
+    customClass: null,
+    // do something with the dom object before you render it, add nodes, get more data from the services etc.
+    beforeRender  :   function(tracksData) {
+      var $player = $(this);
+    },
+    // initialization, when dom is ready
+    onDomReady  : function() {
+      $('a.sc-player, div.sc-player').scPlayer();
+    },
+    autoPlay: false,
+    continuePlayback: true,
+    randomize: false,
+    loadArtworks: 5,
+    // the default Api key should be replaced by your own one
+    // get it here http://soundcloud.com/you/apps/new
+    apiKey: 'htuiRd1JP11Ww0X72T1C3g'
+  };
+
+
+  // the GUI event bindings
+  //--------------------------------------------------------
+
+  // toggling play/pause
+  $('a.sc-play, a.sc-pause').live('click', function(event) {
+    var $list = $(this).closest('.sc-player').find('ol.sc-trackslist');
+    // simulate the click in the tracklist
+    $list.find('li.active').click();
+    return false;
+  });
+
+  // displaying the info panel in the player
+  $('a.sc-info-toggle, a.sc-info-close').live('click', function(event) {
+    var $link = $(this);
+    $link.closest('.sc-player')
+      .find('.sc-info').toggleClass('active').end()
+      .find('a.sc-info-toggle').toggleClass('active');
+    return false;
+  });
+
+  // selecting tracks in the playlist
+  $('.sc-trackslist li').live('click', function(event) {
+    var $track = $(this),
+        $player = $track.closest('.sc-player'),
+        trackId = $track.data('sc-track').id,
+        play = $player.is(':not(.playing)') || $track.is(':not(.active)');
+    if (play) {
+      onPlay($player, trackId);
+    }else{
+      onPause($player);
+    }
+    $track.addClass('active').siblings('li').removeClass('active');
+    $('.artworks li', $player).each(function(index) {
+      $(this).toggleClass('active', index === trackId);
+    });
+    return false;
+  });
+
+  var scrub = function(node, xPos) {
+    var $scrubber = $(node).closest('.sc-time-span'),
+        $buffer = $scrubber.find('.sc-buffer'),
+        $available = $scrubber.find('.sc-waveform-container img'),
+        $player = $scrubber.closest('.sc-player'),
+        relative = Math.min($buffer.width(), (xPos  - $available.offset().left)) / $available.width();
+    onSeek($player, relative);
+  };
+
+  var onTouchMove = function(ev) {
+    if (ev.targetTouches.length === 1) {
+      scrub(ev.target, ev.targetTouches && ev.targetTouches.length && ev.targetTouches[0].clientX);
+      ev.preventDefault();
+    }
+  };
+
+
+  // seeking in the loaded track buffer
+  $('.sc-time-span')
+    .live('click', function(event) {
+      scrub(this, event.pageX);
+      return false;
+    })
+    .live('touchstart', function(event) {
+      this.addEventListener('touchmove', onTouchMove, false);
+      event.originalEvent.preventDefault();
+    })
+    .live('touchend', function(event) {
+      this.removeEventListener('touchmove', onTouchMove, false);
+      event.originalEvent.preventDefault();
+    });
+
+  // changing volume in the player
+  var startVolumeTracking = function(node, startEvent) {
+    var $node = $(node),
+        originX = $node.offset().left,
+        originWidth = $node.width(),
+        getVolume = function(x) {
+          return Math.floor(((x - originX)/originWidth)*100);
+        },
+        update = function(event) {
+          $doc.trigger({type: 'scPlayer:onVolumeChange', volume: getVolume(event.pageX)});
+        };
+    $node.bind('mousemove.sc-player', update);
+    update(startEvent);
+  };
+
+  var stopVolumeTracking = function(node, event) {
+    $(node).unbind('mousemove.sc-player');
+  };
+
+  $('.sc-volume-slider')
+    .live('mousedown', function(event) {
+      startVolumeTracking(this, event);
+    })
+    .live('mouseup', function(event) {
+      stopVolumeTracking(this, event);
+    });
+
+  $doc.bind('scPlayer:onVolumeChange', function(event) {
+    $('span.sc-volume-status').css({width: event.volume + '%'});
+  });
+  // -------------------------------------------------------------------
+
+  // the default Auto-Initialization
+  $(function() {
+    if($.isFunction($.scPlayer.defaults.onDomReady)){
+      $.scPlayer.defaults.onDomReady();
+    }
+  });
+
+})(jQuery);