I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library...
Build a MySpaceID ApplicationAshley
MySpaceID allows MySpace Users to easily come into your site and get going by bringing their identity with them. By allowing Users to link their MySpace account with your site, a Developer can enable social functionality.
This guide is designed to give you a thorough understanding of the MySpace API as well as demonstrate with step by step instructions on how to setup a MySpaceID powered site in a short amount of time. You can check out the demo and download the files needed in this tutorial.
Setup a developer account on MySpace
First you’ll need to head over to MySpace.com and signup for a standard user account here:
If you already have a MySpace account login at http://myspace.com. If you don’t have a developer account you’ll need to create one here:
Setup a new MySpaceID application
Once you have your developer account and have confirmed everything you can go ahead and click ‘Build’.
you’re now presented with two options. MySpace Apps or MySpaceID. We’re going to be creating an application that doesn’t sit on MySpace so you’ll need to select ‘Create MySpaceID App’
Once you have completed the first step and given your application a title, accepted the terms and conditions and filled In the CAPTCHA you can click ‘Next’
Step Two may seem a little daunting but don’t be worried there are just three things we need to do on this page. Firstly give you’re application a description (you can come back and edit this later along with the title) the next most important part to edit on this page is the ‘External Site Settings’
The external URL should look like this for the purposes of our demonstration:
The External Callback Validation box should just contain your site’s domain for example like this:
We’re not using OpenID in this demonstration so just leave that un-ticked.
TIP: We’ll need the OAuth API Key and Secret so make a note of them. The location of where they can be found is a little further up the page under the header ‘OAuth Settings’.
TIP: If at any stage you need to get back to your OAuth Key and Secret just click ‘My Apps’ then ‘Edit App details’
Configuring the application
Lets just have a look at the file structure of our application so we can understand from the outset exactly where each component of the app is located and what to look out for when making any changes.
- This is where your MySpace API Key and Secret need to go.
- Myspaceid-oauth Folder. This contains all the frontend files for our application. The index.php file is the main application page that we visit initially. If the user isn’t logged in to the app then they are directed to login.php
- Views folder. This is where all the HTML layout files are kept this of you familiar with the MVC or Model View Controller principal will understand this better as the structure is loosely based on this
- Source Folder. This folder contains the MySpace API files in order to connect to MySpace and make requests for data. The myspace.php file is the file that contains the functions required to get the specific data requested.
There are two files you need to edit in order to get the application up and running.
The first file is config.MySpace.php which can be seen above in the config folder. You just need to add your API key and Secret as shown below:
You’ll then need to open up the functions.php file and edit the URL in the base_url() function. This is the main function which returns your main application URL its vital that this URL matches the URL that you entered into MySpace when you setup the application.
Run the application
If you have followed the tutorial correctly you should now see a login screen when you visit your application URL:
Once you click Login with MySpaceID you are taken to the MySpace login page which once you connect will re-direct you back to the application.
After login you are re-directed back to index.php which now should be displaying a selection of your profile information as shown at the top of the page.
Looking at the application in a little more detail
To get a full understanding of what’s going on lets have a look at the index.php file which is located directly inside the myspaceid-oauth folder.
The first thing you should notice is there’s not a lot of code in this file compared to the sample OAuth code that comes with the default PHP SDK from MySpace.
Starting at the top. The three required files are used to setup the application. The first required file contains the API key and Secret, the second file is the main MySpace API file that is used to get data. And finally we load the functions.php file which contains a few functions that I’ve created in order to abstract code from this file to make it easier to understand and logical when it comes to making API requests.
From Lines 11-35 above we have the main block of code that is required to determine if a request has been made to the MySpace API. Within each if/else statement we’re calling the specified functions. For example. If a user initially visits index.php they wont be logged into the application. Because of this they will be re-directed to login.php which is the not logged in landing page. On login.php there is a link to login to MySpace. When the user clicks this they actually visit index.php?f=start. This sets off the authentication process re-directing the user to MySpace to login, once they login MySpace re-directs them back to index.php?f=callback where the myspace_callback function is called.
TIP: all the functions used in this demo can be found In the functions.php file.
At the bottom of the index.php file we have three included files.
The header and footer files container default code that can be used throughout the app. So in the header.php file we have the document Head and opening Body tag along with an opening container div.
In the footer.php file there’s a footer div and the closing container div from the header.php file.