Windows Phone App Studio + SoundCloud = Music Apps

This article assumes you are familiar with Windows Phone App Studio and have created at least one application using it. We are going to implement the SoundCloud api into Windows Phone App Studio. In the first part of this series we will make a connection to SoundCloud and pull in our predefined tracks that we specify within app studio. Later, we will look at playing these tracks using Background Audio as well as integrate playlists from SoundCloud. Lets dive in!

Step 1:Register as a developer on SoundCloud.

  • Go to developers.soundcloud.com and click on “Register a New App”.
  • You will be prompted with a signup form. Follow the steps to create an account.
  • Begin to register your app.
  • We need to register an app out on SoundCloud to have a client id created for us. This client id will be an id we pass over when we make requests to get track information.
  • Enter the name of you app. In my example, I entered “Windows Phone App”

soundcloud-registerapp

  • Next, fill out your app information by entering your website address. If you do not have a website, you can sign up for Azure and easily create a free website in under 10 minutes.

soundcloud-registerapp-2

  • Make sure you do not share you client id or secret with anyone. This is to be used by your app only.
  • We are done here on SoundCloud. The only thing we are going to need is the client id. Write that down or copy it somewhere for when we start using Visual Studio.

 

Step 2: App Studio – Collection

I am not going to go into detail on creating a Windows Phone App Studio app, this tutorial assumes you are familiar with that process already.

  • The first step is to add a Collection to one of you Sections. In my example I am naming it “Singles”.
  • Let’s edit the Collection and add the following structure to it.
  • TrackTitle – text – This will be the name of our track
  • TrackUrl – song – This will be the url of our track (more on that later)
  • Image – image – This is an image of the song (optional)
  • I choose Dynamic Resources (data in the cloud) since I may be removing songs and adding songs and I do not want users to have to download a new version of the app.

Step 3: Adding Data

  • Once your structure is complete, click on ‘Edit Data’ and then ‘Create New’.
  • This will allow you to create a new record.
  • Go back to SoundCloud and find a track that you want included in your app. Once you find a track, click on it so it loads in a full windows as opposed to the artist page or search results and copy the URL.
  • This URL is our TrackUrl. Paste it in.
  • Add a title of the track to TrackTitle.
  • If you have an image, you can upload it now.

soundcloud-editrecord

  • Repeat this process a few times to keep adding the tracks you want in your app.

Step 4: Pages

 

  • Once the collection is complete, click on pages and choose a template that will display your tracks well. I choose the second template.

soundcloud-template

  • Be sure to bind your elements. Title is our TrackTitle and Image is our Image. We don’t need to add our TrackUrl here.
  • Click on the detail page and provide a page title.
  • Here we will only choose Title as a binding and we will use an Action and select Search Song and bind our TrackUrl to it.

soundcloud-template-2

  • We are now done with App Studio. Just to recap, we registered for a SoundCloud app, added a Collection and defined our structure, bound our data elements to the pages and added an Action command to our page detail.
  • The reason I am using an Action command, is I am relying on code that App Studio will generate to allow me minimal coding on my project.

Step 5: Export Project

  • After you select your themes, tiles etc. click Finish and Generate to output a Visual Studio solution.

soundcloud-generate

Step 6: Open Up In Visual Studio 2013

 

  • Download the source, extract and open up in Visual Studio 2013.
  • The first thing you should do is make sure the NuGet packages are installed and up to date. You can do this by clicking on the solution and choosing Manage NuGet Packages and either choose update or restore. Another way is to select the checkbox called “Allow NuGet to download missing packages” this is under the NuGet package settings.
  • Once we are up to date, you can compile and deploy to your Windows Phone Emulator. (Technically you can deploy to Windows as well but the XAML portion of this tutorial will only focus on Windows Phone. You can apply the same techniques to the Windows project).

Step 7: SoundCloud API

 

  • Let’s recap a bit on our data that we added to our Collection. We added an Image and TrackTitle really for display purposes. It has nothing to do with SoundCloud. The key that matches up our data with a SoundCloud track is the TrackUrl. This is what we are going to use to pull in our audio.
  • If we dive into the SoundCloud API to find what endpoint is needed to access our tracks we find one called api.soundcloud.com/tracks/[track_id].format
  • This will return the information we need to use to access the streaming URL. However, we do not have access to the track_id. It is not in the URL that we used for TrackUrl in our Collection. It is also nowhere on the SoundCloud site, so we are going to have to solve this.
  • Luckily for us SoundCloud has a /resolve endpoint. It takes a parameter of URL and will return a redirect to the API resource URL. PERFECT!
  • So what we need to do is call that endpoint with our TrackUrl as a parameter and we will get back our full JSON of what we need! (ex: http://api.soundcloud.com/resolve.json?url=http://soundcloud.com/artist/track-name&client_id=xxx)

Step 8: Schemas, Providers, Services, Oh My!

Schema

  • To continue to follow the pattern of the App Studio project, we will need to create a schema of our JSON so we can populate an object for access to its data.
  • How can we create an object from our JSON? Well, lets first get the JSON. Open a browser and paste in the URL that you will be constructing for the call.
  • http://api.soundcloud.com/resolve.json?url=http://soundcloud.com/artist/track-name&client_id=xxx
  • Where the URL is one of the URL’s you put in the Collection in App Studio and client_id is your actual client id.
  • You will now be redirected to the response body with the JSON from the request. It should look a bit like this:

soundcloud-json

  • Copy the JSON and let’s go to jsonlint.com an online JSON validator/formatter. Paste the JSON and click Validate!
  • Now are JSON should validate and be formatted a bit. The formatting does not matter but I wanted you to see all of the fields that are coming back in the JSON. The one we are concerned with is the stream_url. In my next tutorials we will look at the images and some other properties to make our player a bit better.
  • Now we know all of the properties that our object needs to contain. However, creating the object by hand can be a pain. There are 2 ways we can do this quickly.
First Way
  • We need to create a class for our schema so let’s add a new class to our AppStudio.Data (Portable) project in the DataSchemas folder and call it SoundColudTrackSchema.cs
  • Change the namespace to AppStudio.Data.SoundCloud and remove the default class that is there.
  • Choose Edit -> Paste Special -> Past JSON as Classes.
  • Your JSON will now become a full class! Make sure you rename RootObject to SoundCouldTrackSchema but you should be done.
Second Way
  • Let’s go to json2csharp.com and copy our JSON and paste it in this website and click Generate.
  • Magic! We have out schema class!
  • In Visual Studio, create a new class in our AppStudio.Data (Portable) project in the DataSchemas folder and call it SoundColudTrackSchema.cs
  • Change the namespace to AppStudio.Data.SoundCloud and remove the default class that is there.
  • Copy and paste from the website.
  • Now we have our object for our track.

Provider

  • Copy and Paste ServiceDataProvider.cs from the AppStudio.Data.DataProviders directory and rename it to SoundCloudDataProvider.cs. We will be using this as a base for our provider. (be sure to change the class name)
  • Remove the DATASERVICES_URL_LINE and add the following:

  •  That will be our endpoint that we will be calling to get our track data. Remember, it looks like the URL we just used to get our JSON.
  • Remove the constructor that is there and add our new one

  •  Our provider is done!

Services

  • We have our object structure completed and a way to access SoundCloud, now we need a way to call it.
  • Lets create a class in the Shared Project under AppStudio.Services folder and lets call this SoundCloudMusicService.cs
  • Make it a static public class
  • Remove the references up top and just add the following:
  • System, System.Threading.Tasks, Windows.System, AppStudio.Data.SoundCloud
  • Create a private const string called _clientId and give it a value of your client id from the SoundCloud app you registered.
  • In the next session we will look at how we can add background audio and better play selection, but for this article we are going to just send back the stream_url. Add the following method:

  •  We are making a constructor call to our provider and passing in our clientId and the TrackUrl (which will get soon) and calling the LoadTrack method which returns our SoundCloudSchema object populated from our JSON. All we need is stream_url and append that with our client id and that is the URL we are going to launch.

Step 9: Action Commands

  • Remember way back in the first couple of steps we choose an Action for our Page view of Song Search? It was to allow us to have some code generated that we can use to launch the stream_url we are dynamically creating.
  • Go into the Windows Phone project and open up AppStudio.Commands.ActionCommand.cs
  • We are going to create a new ICommand method called SoundCloudLaunchTrack

  •  What we are doing here is taking the parameter of the command (which is our TrackUrl) and call the SoundCloudMusicService to get the stream url and navigate to it.

Step 10: Last XAML Change

  • We named our page Singles so we will have a SinglesDetailPage.xaml and a SingleView.xaml.
  • The SinglesView.xaml is found in DataTemplates and we need to modify the action command. Look for the DataTemplate for the Single Detail.
  • Find the Button with the Command Path and change it to SoundCloudLaunchTrack.
  • Done!

What we have completed is a cloud based repository that you can update with images and track names and urls on an as needed basis. Anyone who downloads your app will get the latest updates and will be able to launch the track from the detail page. This was an example of how to add SoundCloud to your App Studio project quickly with minimal impact to the project structure.

GitHub_Logo
Get the solution on GitHub

Next up is to look at streaming this audio with a background task.

Leave a Comment

(8 Comments)

  • Balaji Balagurusami

    Hello Sir,
    That’s a great news for Developers and also those who publish audio in Sound Cloud. I am new to developing Apps. Even though I read till the end of the article, I want to make sure something. Is there any easy way to link an artist page in a sound cloud or a search term, just like the twitter integration in Windows App Studio app?

    Because from the STEP 3, what I understand is, do I need to update this field every time when a new track/song is added by the artist?

    • Joshua Drew

      Hello – as of now that is how you would have to do it. Enter in the “track url” into the App Studio Data Collection to get that fed into the app. This is a basic example of having preselected tracks assigned to the app. I have a few other tutorials in the works such as playing the music in the background as well as utilizing playlists from soundcloud. I like the search idea. I will add that as well.

      • Balaji Balagurusami

        Thanks for the reply! Looking forward to them 🙂

        • Joshua Drew

          I just added the background audio.

  • david

    I have difficulty in
    http://api.soundcloud.com/resolve.json?url=http://soundcloud.com/artist/track-name&client_id=91a0c3b772daa3a9febxxxxxxxxx,

    {“errors”:[{“error_message”:”404 – Not Found”}]}

    • H nguyen (@haivien)

      @david

      You need to use a valid URL for artist track name.

      url=http://soundcloud.com//

  • Dan Menapace

    If you just want to add some songs or setlist. Can you do it without Visual Studio?
    Just follow Steps 1-5 and not worry about the rest?

  • test

    Hi there very nice site!! Man .. Excellent .. Amazing ..
    I will bookmark your blog and take the feeds additionally?
    I’m happy to seek out numerous useful info here in the put up, we’d like develop more strategies in this regard,
    thank you for sharing. . . . . .

  • Your email address will not be published. Required fields are marked *