Using SoundCloud with Codenvy

Create a SoundCloud Widget with a Codenvy Factory:



SoundCloud is an online audio distribution platform based in Berlin, Germany that enables its users to upload, record, promote and share their originally-created sounds. In this tutorial we are going to integare customizable SouondCloud Player into a html page through JavaScript API. To use the java script API we need “soundcloud.player.api.js”. Users can get this file from SounCloud GitHub pages.

Steps required to add a Soundcloud player into a HTML

Download soundcloud.player.api.js

You will need to use it in your project. Here’s the download link

Put the following code into your HTML head

<script type="text/javascript" src="scripts/soundcloud.player.api.js"></script>
<script type="text/javascript">

   soundcloud.addEventListener('onPlayerReady', function(player, data) {

     player.api_play();

   });

</script>

3. Put the following code into your HTML body:

<object height="81" width="100%"> <param name="movie"
value="http://player.soundcloud.com/player.swf?{ ADD YOUR PARAMETERS HERE }&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F293"></param>
<param name="allowscriptaccess"value="always"></param>
<embed
src="http://player.soundcloud.com/player.swf?{ ADD YOUR PARAMETERS HERE }&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F293"
allowscriptaccess="always" height="81"type="application/x-shockwave-flash" width="100%">
</embed></object>

The ADD YOUR PARAMETERS HERE is as shown in below image these parameters can be add as key value pairs in the url.

There are two url’s in the above code, which shold have same value
1.  <param name=”movie” value=”URL”></param>
2.  <embed src=”URL”

soundcloud

Sample code used in the HTML which has url and parameters information.

<object height="81" width="40%" id="yourPlayerId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
     <param name="movie" value="http://player.soundcloud.com/player.swf?url=https://soundcloud.com/kaskade/kaskade-vs-martin-garrix-turn&amp;enable_api=true&amp;object_id=yourPlayerId&amp;auto_play=true"></param>
     <param name="allowscriptaccess" value="always"></param>
     <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=https://soundcloud.com/kaskade/kaskade-vs-martin-garrix-turn&amp;enable_api=true&amp;object_id=yourPlayerId&amp;auto_play=true" type="application/x-shockwave-flash" width="40%" name="yourPlayerId"></embed>
   </object>

One more thing need to consider is:

url=https://soundcloud.com/kaskade/kaskade-vs-martin-garrix-turn

This url value is taken from the soundcloud site,user can replace this value.

Source code :

Create Index.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>SC Player JS API</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Matas Petrikas">
</head>
<body>
<h1>JavaScript API - a simple auto-play example - listener implementation</h1>
<script type="text/javascript" charset="utf-8" src="soundcloud.player.api.js"></script>
<script type="text/javascript" charset="utf-8">soundcloud.addEventListener('onPlayerReady', function(player, data) {
player.api_play();
});
</script>
<object height="81" width="40%" id="yourPlayerId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://player.soundcloud.com/player.swf?url=https://soundcloud.com/kaskade/kaskade-vs-martin-garrix-turn&amp;enable_api=true&amp;object_id=yourPlayerId&amp;auto_play=true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=https://soundcloud.com/kaskade/kaskade-vs-martin-garrix-turn&amp;enable_api=true&amp;object_id=yourPlayerId&amp;auto_play=true" type="application/x-shockwave-flash" width="40%" name="yourPlayerId"></embed>
</object>
<pre>
<code>
soundcloud.addEventListener('onPlayerReady', function(flashId, data) {
soundcloud.getPlayer(flashId).api_play();
});
</code>
</pre>
</body>
</html>