How to use SoundCloud API to filter by genres
Question
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?
1 answers
solution1
1 ACCPTED 2015-03-02 11:26:09
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.