Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

139 lines (127 sloc) 6.069 kb
<!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>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
<script type="text/javascript" charset="utf-8" src="../soundcloud.player.api.js"></script>
<script type="text/javascript" charset="utf-8">
// ------- an example of Prototype integration ----------
$(document)
.observe('soundcloud:onPlayerReady', function(event) {
// the soundcloud.player.api.js wrapper triggers custom events
// please refer to JS API wrapper for full the event list
var flash = event.target,
playing;
// insert a 'play' link
$('controls').insert('<a href="#" id="play">Click to Play</a>');
var link= $('play');
// toggle button
var toggleLink = function(event) {
playing = !playing;
if(playing){
link.innerHTML = 'Click to Pause';
}else{
link.innerHTML = 'Click to Play';
}
};
// listen to click on 'play' link
link.observe('click', function(event){
if(playing){
flash.api_pause();
}else{
flash.api_play();
}
Event.stop(event);
});
// listen to events from the player, display infos and toggle the button state
$(document)
.observe('soundcloud:onMediaPlay', function(event) {
var mediaUri = event.memo.mediaUri,
mediaId = event.memo.mediaId;
$('info').innerHTML = 'the ' + mediaUri + ' no. ' + mediaId + ' is playing';
toggleLink();
})
.observe('soundcloud:onMediaPause', function(event) {
var mediaUri = event.memo.mediaUri,
mediaId = event.memo.mediaId,
// please refer to JS API documention for the full list of player's public methods
currentPosition = event.target.api_getTrackPosition();
$('info').innerHTML = 'the ' + mediaUri + ' no. ' + mediaId + ' was paused at ' + currentPosition + 's';
toggleLink();
});
});
</script>
<!--
Please note the following differences from the standard embed code:
The 'object' tag has an 'id' attribute set to the player identifier (yourPlayerId),
also, the 'embed' tag has a 'name' attribute set to the player identifier (yourPlayerId),
also, there's the query parameter 'object_id' is set to the player identifier (yourPlayerId).
The query parameter 'enable_api' is also set to true, so the callback from Flash will be fired.
These settings are mandatory, for the JS API to work across a wide range of browsers.
If you're using SWFObject or similar Flash generators, set 'id' to the player identifier,
also add 'enable_api:true, object_id:"yourPlayerId"' to the flashvars object
-->
<object height="81" width="100%" id="yourPlayerId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fmatas%2Fhobnotropic&amp;enable_api=true&amp;object_id=yourPlayerId"></param>
<param name="allowscriptaccess" value="always"></param>
<embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fsoundcloud.com%2Fmatas%2Fhobnotropic&amp;enable_api=true&amp;object_id=yourPlayerId" type="application/x-shockwave-flash" width="100%" name="yourPlayerId"></embed>
</object>
<p id="info">Track info</p>
<div id="controls"></div>
<pre>
<code>
// ------- an example of Prototype integration ----------
$(document)
.observe('soundcloud:onPlayerReady', function(event) {
// the soundcloud.player.api.js wrapper triggers custom events
// please refer to JS API wrapper for full the event list
var flash = event.target,
playing;
// insert a 'play' link
$('controls').insert('&lt;a href="#" id="play"&gt;Click to Play'&lt;/a&gt;');
var link= $('play');
// toggle button
var toggleLink = function(event) {
playing = !playing;
if(playing){
link.innerHTML = 'Click to Pause';
}else{
link.innerHTML = 'Click to Play';
}
};
// listen to click on 'play' link
link.observe('click', function(event){
if(playing){
flash.api_pause();
}else{
flash.api_play();
}
Event.stop(event);
});
// listen to events from the player, display infos and toggle the button state
$(document)
.observe('soundcloud:onMediaPlay', function(event) {
var mediaUri = event.memo.mediaUri,
mediaId = event.memo.mediaId;
$('info').innerHTML = mediaUri + ' is playing';
toggleLink();
})
.observe('soundcloud:onMediaPause', function(event) {
var mediaUri = event.memo.mediaUri,
mediaId = event.memo.mediaId,
// please refer to JS API documention for the full list of player's public methods
currentPosition = event.target.api_getTrackPosition();
$('info').innerHTML = mediaUri + ' was paused at ' + currentPosition + 's';
toggleLink();
});
});
</code>
</pre>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.