scplayer.html

<script src="http://connect.soundcloud.com/sdk.js"></script>

<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">
<img src="https://i1.sndcdn.com/artworks-000058833387-zq7xz5-t120x120.jpg?e76cf77">

<pre>
  
</pre>

<script>
(function(){
  var tracksAudio = [];
  var tracksMeta = [];

  SC.initialize({ client_id: "c7ea9749450ebb9efb49fbcf58162226" });

  SC.get('/tracks', function(tin, err){
    tin
      .slice(0,10)
      .forEach(function(track, i){
        SC.stream('/tracks/' + track.id, function(sound){
          tracksAudio.push(sound);
          tracksMeta.push(track)
          if (i==9){
            setupTracks();
          }
        });
      });
  });

  function setupTracks(){
    var images = document.querySelectorAll('img');
    var pre = document.querySelector('pre');

    tracksMeta.forEach(function(track,t){
      if (track.artwork_url){
        images[t].src = track.artwork_url;
      }

      tracksAudio[t].play();
      tracksAudio[t].pause();

      images[t].addEventListener('mouseover', function(){
        tracksAudio[t].resume();
        pre.innerHTML = tracksMeta[t].user.username + ' - ' + tracksMeta[t].title;
      });

      images[t].addEventListener('mouseout', function(){
        tracksAudio[t].pause();
        pre.innerHTML = "";
      });

    })

  }

})();

</script>