Skip to content

Commit

Permalink
soundcloud player list integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@yvg
yvg committed Sep 5, 2010
1 parent 47cce9c commit 1308b01
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 53 deletions.
112 changes: 112 additions & 0 deletions code/experiment/soundcloud_player/js-mini-player.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>JS Mini Player</title>

<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

<style>

*{ margin: 0; padding: 0; }

body{ padding: 20px; } p{ margin: 20px 0;}

.sc-player{
font: 10px 'Lucida Grande', Helvetica, Arial, sans-serif;
height: 18px;
position: relative;
width: 100%;
}

.sc-slide{
background-color: #0066CC;
-moz-border-radius: 100px; -webkit-border-radius: 100px;
height: 18px; width: 18px;
position: absolute;
top: 0; left: 0;
}

a{ color: #0066CC; text-decoration: none; }

.sc-container{ padding-left: 18px; padding-right: 36px; }

.sc-content, .sc-controls, .sc-logo{ float: left; position: relative; }

.sc-controls{ width: 18px; margin-left: -100%; right: 18px; }

.sc-controls a{ height: 18px; width: 18px; }

.sc-controls a{
background: url("images/controls.png") no-repeat;
color: transparent;
display: block;
}

.sc-controls a.sc-pause{ background-position: -18px 0; display: none; }

.sc-player.playing a.sc-play{ display: none; }
.sc-player.playing a.sc-pause{ display: block; }

.sc-content{ width: 100%; margin-top: 2px; }

.sc-info{ margin-left: 4px; overflow: hidden; }

.sc-time-span{ width: 100%; height: 14px; }

.sc-buffer, .sc-played, .sc-waveform-container, .sc-waveform-container img{ height: 14px; }

.sc-waveform-container, .sc-waveform-container img, .sc-buffer, .sc-played{ position: absolute; top: 0; }
.sc-waveform-container, .sc-waveform-container img{ width: 100%; }
.sc-waveform-container{ z-index: 800; }
.sc-played{ z-index: 799; }
.sc-buffer{ z-index: 1; }

.sc-waveform-container{ /*background-color: #0066CC;*/ }

.sc-time-span{ background: #0066CC url('images/black-transparency.png'); }

.sc-time-span .sc-buffer{ background-color: white; }

.sc-time-span .sc-played{ background: #0066CC url('images/white-transparency.png'); }

.sc-logo{ margin-right: -36px; width: 36px; }

.hidden{ display: none; }

.sc-artwork-list, .sc-trackslist, .sc-info-toggle, .sc-volume-slider, .sc-time-indicators{ display: none; }

.sc-player-engine-container{
width: 1px;
height: 1px;
position: fixed;
top: 2px;
left: 2px;
}

</style>

</head>

<body>

<h1>JS Mini-Player</h1>

<p>I'm Flash, I don't work on iPhones :-(</p>

<p><object height="18" width="100%"> <param name="movie" value="http://player.soundcloud.com/player.swf?url=http://soundcloud.com/johnlegend/wake-up-everybody&amp;auto_play=false&amp;player_type=tiny&amp;font=Arial&amp;color=0066CC"></param> <param name="allowscriptaccess" value="always"></param> <param name="wmode" value="transparent"></param><embed wmode="transparent" allowscriptaccess="always" height="18" src="http://player.soundcloud.com/player.swf?url=http://soundcloud.com/johnlegend/wake-up-everybody&amp;auto_play=false&amp;player_type=tiny&amp;font=Arial&amp;color=0066CC" type="application/x-shockwave-flash" width="100%"></embed> </object></p>

<p>I'm JS, HTML5-ish, & CSS, iPhones love me! :-)</p>

<p><a href="http://soundcloud.com/johnlegend/wake-up-everybody" class="sc-player">Test</a></p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/soundcloud.player.api.js"></script>
<script type="text/javascript" src="js/sc-player.js"></script>

</body>
</html>
107 changes: 60 additions & 47 deletions code/experiment/soundcloud_player/js/sc-player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
// let's enable the html5 audio on selected mobile devices first, unlikely to support Flash
// the desktop browsers are still better with Flash, e.g. see the Safari 10.6 bug
// comment the following line out, if you want to force the html5 mode
state = state && (/iPad|iphone|mobile|pre\//i).test(navigator.userAgent);
// state = state && (/iPad|iphone|mobile|pre\//i).test(navigator.userAgent);
}catch(e){
// there's no audio support here sadly
}
Expand Down Expand Up @@ -262,25 +262,23 @@
// load first tracks
loadUrl(links[index]);
},
artworkImage = function(track, usePlaceholder) {
/*artworkImage = function(track, usePlaceholder) {
if(usePlaceholder){
return '<div class="sc-loading-artwork">Loading Artwork</div>';
}else if (track.artwork_url) {
return '<img src="' + track.artwork_url.replace('-large', '-t300x300') + '"/>';
}else{
return '<div class="sc-no-artwork">No Artwork</div>';
}
},
},*/
updateTrackInfo = function($player, track) {
// update the current track info in the player
// log('updateTrackInfo', track);
$('.sc-info', $player).each(function(index) {
$('h3', this).html('<a href="' + track.permalink_url +'">' + track.title + '</a>');
$('h4', this).html('by <a href="' + track.user.permalink_url +'">' + track.user.username + '</a>');
$('p', this).html(track.description || 'no Description');
$(this).html('<a href="' + track.permalink_url +'" target="_blank">' + track.title + '</a> by <a href="' + track.user.permalink_url +'" target="_blank">' + track.user.username + '</a> ' + track.playback_count + ' plays ' + timecode(track.duration));
});
// update the artwork
$('.sc-artwork-list li', $player).each(function(index) {
/*$('.sc-artwork-list li', $player).each(function(index) {
var $item = $(this),
itemTrack = $item.data('sc-track');
Expand All @@ -297,7 +295,7 @@
// reset other artworks
$item.removeClass('active');
}
});
});*/
// cache the references to most updated DOM nodes in the progress bar
updates = {
$buffer: $('.sc-buffer', $player),
Expand All @@ -307,7 +305,13 @@
// update the track duration in the progress bar
$('.sc-duration', $player).html(timecode(track.duration));
// put the waveform into the progress bar
$('.sc-waveform-container', $player).html('<img src="' + track.waveform_url +'" />');
if($.browser.webkit){
$('.sc-waveform-container', $player).css({'-webkit-mask-box-image' : 'url(' + track.waveform_url + ') 75 stretch', 'background-color' : '#0066CC'});
}else{
$('.sc-waveform-container', $player).html('<img src="' + track.waveform_url +'" />');
}

$('.sc-logo', $player).html('<a href="' + track.permalink_url + '" target="_blank"><img src="images/logo.png" border="0"></a>')

$player.trigger('onPlayerTrackSwitch.scPlayer', [track]);
},
Expand Down Expand Up @@ -412,29 +416,31 @@
// Generate custom skinnable HTML/CSS/JavaScript based SoundCloud players from links to SoundCloud resources
$.scPlayer = function(options, node) {
var opts = $.extend({}, $.scPlayer.defaults, options),

playerId = players.length,
$source = node && $(node),
links = opts.links || $.map($('a', $source).add($source.filter('a')), function(val) { return {url: val.href, title: val.innerHTML}; }),

$player = $('<div class="sc-player loading"></div>').data('sc-player', {id: playerId}),
$artworks = $('<ol class="sc-artwork-list"></ol>').appendTo($player),
$info = $('<div class="sc-info"><h3></h3><h4></h4><p></p><a href="#" class="sc-info-close">X</a></div>').appendTo($player),
$controls = $('<div class="sc-controls"></div>').appendTo($player),
$list = $('<ol class="sc-trackslist"></ol>').appendTo($player);
$slide = $('<div class="sc-slide"></div>').appendTo($player),
$container = $('<div class="sc-container"></div>').appendTo($player),
$content = $('<div class="sc-content"></div>').appendTo($container),
$info = $('<div class="sc-info"></div>').appendTo($content),
$timespan = $('<div class="sc-time-span hidden"></div>').appendTo($content),
$controls = $('<div class="sc-controls"></div>').appendTo($container),
$logo = $('<div class="sc-logo hidden"></div>').appendTo($container),
$clear = $('<div style="clear:both;"></div>').appendTo($player),
$list = $('<ol class="sc-trackslist"></ol>').appendTo($player);

// enable autoplay if set in the options
autoPlay = opts.autoPlay;

// adding controls to the player
$player
.find('.sc-controls')
.append('<a href="#play" class="sc-play">Play</a> <a href="#pause" class="sc-pause hidden">Pause</a>')
.end()
.append('<a href="#info" class="sc-info-toggle">Info</a>')
.append('<div class="sc-scrubber"></div>')
.find('.sc-scrubber')
.append('<div class="sc-volume-slider"><span class="sc-volume-status" style="width:' + soundVolume +'%"></span></div>')
.append('<div class="sc-time-span"><div class="sc-waveform-container"></div><div class="sc-buffer"></div><div class="sc-played"></div></div>')
.append('<div class="sc-time-indicators"><span class="sc-position"></span> | <span class="sc-duration"></span></div>');

$player
.find('.sc-controls')
.append('<a href="#play" class="sc-play"></a><a href="#pause" class="sc-pause"></a>').end()
.find('.sc-time-span')
.append('<div class="sc-waveform-container"></div><div class="sc-buffer"></div><div class="sc-played"></div>')
.append('<div class="sc-time-indicators"><span class="sc-position"></span> | <span class="sc-duration"></span></div>');

// load and parse the track data from SoundCloud API
loadTracksData($player, links, opts.apiKey);
Expand All @@ -447,11 +453,11 @@
// create an item in the playlist
$('<li><a href="' + track.permalink_url +'">' + track.title + '</a><span class="sc-track-duration">' + timecode(track.duration) + '</span></li>').data('sc-track', {id:index}).toggleClass('active', active).appendTo($list);
// create an item in the artwork list
$('<li></li>')
.append(artworkImage(track, index >= opts.loadArtworks))
.appendTo($artworks)
.toggleClass('active', active)
.data('sc-track', track);
//$('<li></li>')
//.append(artworkImage(track, index >= opts.loadArtworks))
//.appendTo($artworks)
//.toggleClass('active', active)
//.data('sc-track', track);
});
$player
.removeClass('loading')
Expand Down Expand Up @@ -514,43 +520,51 @@

// toggling play/pause
$('a.sc-play, a.sc-pause').live('click', function(event) {

var $list = $(this).closest('.sc-player').find('ol.sc-trackslist');
// simulate the click in the tracklist
$list.find('li.active').click();
return false;
});

// displaying the info panel in the player
$('a.sc-info-toggle, a.sc-info-close').live('click', function(event) {
var $link = $(this);
$link.closest('.sc-player')
.find('.sc-info').toggleClass('active').end()
.find('a.sc-info-toggle').toggleClass('active');
return false;

});

// selecting tracks in the playlist
$('.sc-trackslist li').live('click', function(event) {

var $track = $(this),
$player = $track.closest('.sc-player'),
trackId = $track.data('sc-track').id,
play = $player.is(':not(.playing)') || $track.is(':not(.active)');

if (play) {

$('.sc-info', $player).addClass('hidden');
$('.sc-logo', $player).removeClass('hidden');
$('.sc-slide', $player).animate({ width: "100%" }, "slow", function(){$('.sc-time-span', $player).removeClass('hidden');} );

onPlay($player, trackId);

}else{

$('.sc-info', $player).removeClass('hidden');
$('.sc-time-span', $player).addClass('hidden');
$('.sc-logo', $player).addClass('hidden');
$('.sc-slide', $player).css({width: "18px"});

onPause($player);

}
$track.addClass('active').siblings('li').removeClass('active');
$('.artworks li', $player).each(function(index) {
$(this).toggleClass('active', index === trackId);
});
//$('.artworks li', $player).each(function(index) {
// $(this).toggleClass('active', index === trackId);
//});
return false;
});

var scrub = function(node, xPos) {
var $scrubber = $(node).closest('.sc-time-span'),
$buffer = $scrubber.find('.sc-buffer'),
$available = $scrubber.find('.sc-waveform-container img'),
$available = $scrubber.find('.sc-waveform-container'), // img'),
$player = $scrubber.closest('.sc-player'),
relative = Math.min($buffer.width(), (xPos - $available.offset().left)) / $available.width();
onSeek($player, relative);
Expand All @@ -563,7 +577,6 @@
}
};


// seeking in the loaded track buffer
$('.sc-time-span')
.live('click', function(event) {
Expand All @@ -580,7 +593,7 @@
});

// changing volume in the player
var startVolumeTracking = function(node, startEvent) {
/*var startVolumeTracking = function(node, startEvent) {
var $node = $(node),
originX = $node.offset().left,
originWidth = $node.width(),
Expand Down Expand Up @@ -608,7 +621,7 @@
$(document).bind('scPlayer:onVolumeChange', function(event) {
$('span.sc-volume-status').css({width: event.volume + '%'});
});
});*/
// -------------------------------------------------------------------

// the default Auto-Initialization
Expand All @@ -618,4 +631,4 @@
}
});

})(jQuery);
})(jQuery);
26 changes: 21 additions & 5 deletions code/js/mashbox1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ jQuery(document).ready(function(){
handleList();
lastFmGetCover(1);
lastFmGetCover(2);
setSCTable();
});

function setSCTitle() {
Expand All @@ -11,6 +12,26 @@ function setSCTitle() {
},2500);
}

function setSCTable() {
jQuery('tbody tr').bind('click',function(e){
e.preventDefault();
var player = soundcloud.getPlayer('scPlayerEngine');
player.api_stop();
var link = jQuery(this).find('a')[0].href;
jQuery('#player div:first-child').html('<a href="'+link+'" id="sc-play-me"></a>');
jQuery('#sc-play-me').scPlayer();
var player = soundcloud.getPlayer('scPlayerEngine');
setTimeout(function(){
console.log(player)
player.api_toggle();
jQuery('.sc-play').click();
},500);
});
jQuery('tbody tr a').bind('click',function(e){
e.preventDefault();
});
}

function handleList() {
jQuery("#files").bind('click',function(e){
e.preventDefault();
Expand Down Expand Up @@ -55,11 +76,6 @@ var lastFmGetCover = function(nb) {

}

// console.log(soundcloud)
// soundcloud.addEventListener('onPlayerReady', function(){
// alert('ok')
// });




Expand Down
Loading

0 comments on commit 1308b01

Please sign in to comment.