Creating a searchable music site, using the soundcloud API.

June 25, 2017 0 Comments

Creating a searchable music site, using the soundcloud API.

 

 

If you’ve ever wanted to create your own, personal ‘spotify’ type site, it may be much easier than you thought. Below, I’ve included some step by step guides to make it happen. To get started though, there are a few things you may want to brush up on first.

  1. You will need to sign up for the soundcloud for developers and get an API key: https://developers.soundcloud.com/
  2. You will also probably want to read through the API guide. You may want to build it differently than the way I describe it here, and the API guide has some resources that may prove useful if you do go a different route. https://developers.soundcloud.com/docs/api/guide
  3. I’ll be using the fetch method for getting the API. Fetch is the newer, more flexible way to grab API resources, as opposed to the older XMLhttpRequest. If you need to brush up on the fetch process, here’s a great 8 minute video with a nice overview of fetch: https://www.youtube.com/watch?v=g6-ZwZmRncs
  4. You will probably also want to download Postman, which just makes it easier to go through the api data. https://www.getpostman.com/

Okay, that’s enough to get started. Now on to laying out the project. This will basically have 3 parts: The HTML, CSS, and Javascript. I found it easiest to set up the HTML first, so I knew what element ID’s I would need to use in the Javascript. Since all of the data is created dynamically, the HTML is pretty basic. Your HTML will just need these 4 key pieces:

The input could look something like this: It just needs a specific ID to use in the javascript. <input type=”text” id=”trackInput”>

Same things with the submit. All we really need is the ID to use in javascript. <button type=”submit” id=”submitButton”name=”button”>SUBMIT</button>

This can just be a section. We don’t really need to create an audio player here. I found it easier to create in javascript, and place it on the page when the music plays. <section id=”playAudioHere”></section>

This section doesn’t really need anything specific either, other than an ID. This is where we will put the results of the search, once the fetch has pulled the search results from the API. <section id=”bands”></section>

Okay, that should about do it here. Obviously you can add a lot more, if you want it to look pretty, but that’s the basic skeleton for what we need. Now on to the Javascript.

First thing’s first, declaring global variables. We’ll want to declare the variables that we know we’ll need to use here. We know we’ll need to use the trackInput and the submitButton. Those we can go ahead and call out.

let trackInput = document.getElementById(‘trackInput’);
let submitButton = document.getElementById(‘submitButton’);

I also created a third variable for the clicked state of the submit button.

submitButton.onclick = searchTracks;

That’s really all we need. Now, if you already have your API key, you could probably store that as a variable too. However, it’s probably easier to do that all inside the search function instead. Before we get into the search function, let’s talk about how to use the API key. Once you get it, it will probably look something like this.

https://api.soundcloud.com/tracks?clientid=YOURCLIENTID

Obviously, you can put your client ID where it says, “YOUR CLIENT ID”. You’ll notice in the path, it says ‘soundcloud.com/tracks. You could instead use soundcloud.com/users, if you wanted to search by users. Or soundcloud.com/playlists, etc. However, once you open it up in postman, you will find that tracks has the ‘streamurl’ which is what we will need to actually play the music, so I only used the tracks search for that reason.

For me, since I assigned searchTracks to the submitButton.onclick, I’m going to use searchTracks now as a function, and then assign the trackInput.value to a variable called searchResults, so that I can use those search results along with my fetch.

function searchTracks() {
 let searchResults = trackInput.value;

Then the fetch:

fetch(‘https://api.soundcloud.com/tracks/?clientid=YOURCLIENTID HERE' + searchResults).then(function(response) {
 if (response.status != 200) {
 console.log(‘Looks like there was a problem. Status Code’ + response.status);
 return;
 }

response.json().then(function(data) {
 let track = data;
 console.log(track);

If you’re familiar with fetch, or watched the above vide, then this probably looks pretty familiar. In the first part, I’ve put in the url for the soundlcoud api and then added + searchResults, so that it pulls the api results of that search. Now I did a few things here as well. I created an element in Javascript that displays the text “showing results for + search results” just for added user experience. So there are a lot of additional things you can do here, if you feel so inclined. But I really just want to cover the basics in this post.

At first, I tried to iterate over the data using a for loop, just because that’s what I was more familiar with. That’s definitely an acceptable method, but I had more success using the .map method. I don’t know why that worked better, but it did. for more information on the .map method, you can find it here. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Array/map

So basically I created a function called renderTracks which was an immediately invoked function expression (IIFE). and let that function render the results using .map. Yours might look something like this:

function renderTracks() {

return <br>&#xA0;${track.map(track =&gt;<br>&#xA0;<div class=”box”>
 <div src=”${track.streamurl}”></div>
 <button id=”albumBtn” class=”albumButton”><img id=”${track.stream
url}${clientId}” src=”${track.artwork_url}”></img></button>
 <div id=”songTitle” class=”title”>${track.title}</div>
 </div><br>&#xA0;)}<br>&#xA0;
 }

let markup = ${renderTracks()};
 document.getElementById(‘bands’).innerHTML = markup;

This section of code basically uses dot notation to identify the elements from the api that we want to use, and creates divs and buttons to hold them. Then we render them on the page in the ‘bands’ div from our html.

Now, that’s enough to at least get you started. You’ll still need to add audio. But if you’ve gotten this far, I’m sure you can knock it out.

Feel free to reach out to me if you have any questions, or let me see your final project. I’m always amazed at the diverse way different programmers solve similar problems. Thanks for reading!


Tag cloud