CODEWITHSUNDEEP
javascripthtmlsoundcloud
NineCattoRules
NineCattoRules

Reputation: 2428

How to use SoundCloud API to filter by genres

I'm trying to use the API of SoundCloud without success, most examples and tutorials on the web are not working. For the purpose I used this video tutorial. I wish to create on my website a filter by genres. So first I created an HTML:

<!DOCTYPE html>
<html>
    <head>
        <script src="//connect.soundcloud.com/sdk.js"></script>
        <script src="js/soundcloud.js"></script>
    </head>
    <body>
        <div id="target">
            <ul>
                <li><a href="#" class="genre">punk</a></li>
                <li><a href="#" class="genre">rap</a></li>
                <li><a href="#" class="genre">rock</a></li>
            </ul>
        </div>
    </body>
</html>

and than a JavaScript (soundcloud.js):

function playSomeSound(genre){
SC.get('/tracks',{
    genres:genre,
    bpm:{
      from:100
    }
  }, function(tracks){
    var random=Math.floor(Math.random()*49);
    SC.oEmbed(tracks[random]).uri,{auto_play:true}, document.getElementById('target')
  });
}

window.onload=function(){
  SC.initialize({
    client_id: 'my_app_id'
  });

  var menuLinks=document.getElementsByClassName('genre');
  for (var i=0; i<menuLinks.lenght;i++){
    var menuLink=menuLinks[i];
    menuLink.onclick=function(e){
      e.preventDefault();
      playSomeSound(menuLink.innerHTML);
    }
  }

};

When I navigate to my website everything is fine, I get no errors from console, however if I click on a genre, it does nothing. Why it doesn't retrieve songs from SoundCloud? SoundCloud has changed different things for API use, is there another method?

Upvotes: 0

Views: 501

Answers (1)

Bwaxxlo
Bwaxxlo

Reputation: 1880

for (var i=0; i<menuLinks.lenght;i++){ //it should be .length and not lenght
    var menuLink=menuLinks[i];
    menuLink.onclick=function(e){
      e.preventDefault();
      playSomeSound(menuLink.innerHTML);
    }
  }

Also, you misplaced a parenthesis on SC.embed. Here's a working solution: http://jsbin.com/pugegesepu/1/edit

Upvotes: 1

Related Questions