Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (103 sloc) 4.58 KB
<html>
<head>
<title>Continuous SoundCloud Player</title>
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>
<link href='css/core.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/build.js"></script>
<script type="text/javascript" src="demo/downpour.fm/js/view.js"></script>
</head>
<body>
<div id="ui" class="ui-box">
<div id="player"></div>
<div id="playlist">
<div id="buttons">
<ul>
<li class="unselectable playlist"><a href="#playlist">playlist (<span class="count">0</span>)</a></li>
<li class="unselectable groups"><a href="#groups">groups (<span class="count">0</span>)</a></li>
<li class="unselectable help"><a href="#help">help</a></li>
<li class="unselectable about"><a href="#about">about</a></li>
</ul>
</div>
<div class="content scroller">
<ul class="playlist page"></ul>
<div class="groups page">
<input type="text" name="group" class="group-name" value="" />
<a href="#" class="add-group">+</a>
<div class="no-groups">
<h1>It looks like you should add a group!</h1>
<p>
To get started, type a SoundCloud group in the box and press enter or click the plus!<br />
<p>
<p>
Examples include: dubstep, dnb, rock, metal, etc...
</p>
<h1>How do I find groups?</h1>
<p>
Head over to <a target="_blank" href="http://soundcloud.com/groups">SoundCloud groups</a> and navigate to a group that interests you.
</p>
<p><img src="img/finding-groups.png" /></p>
<p>
Then enter the last part of the url (highlighted in red) into the group box above.
</p>
<p><img src="img/enter-group-name.png" /></p>
</div>
<ul class="group-list"></ul>
</div>
<div class="help page">
<h1>Basic Usage</h1>
<p>
Using this player is simple just add some groups and you'll be off!
</p>
<h1>Keyboard Shortcuts</h1>
<ul>
<li>up arrow - volume up</li>
<li>down arrow - volume down</li>
<li>left arrow - previous track</li>
<li>right arrow - next track</li>
<li>space - toggle pause</li>
<li>] - seek 500ms into the future</li>
<li>[ - seek 500ms into the past</li>
<li>? - show this screen</li>
</p>
<h1>If things go horribly wrong</h1>
<p>
Click <a class="reset" href="#">here</a> and everything will be reset.
</p>
</div>
<div class="about page">
<h1>Another SoundCloud player?</h1>
<p>
Currently, SoundCloud plays tracks in reverse chronological order. This is problematic because you will end up hearing
the same tracks over and over if you let it for a bit and then start again at page one. This player solves that problem by playing tracks in chronological order.
</p>
<p>
When you add a group, the latest tracks will be immediately added to your playlist. After each track is played, soundcloud is queried and a new set of tracks are retrieved. As long as people are uploading tracks you will continue to hear new music!
</p>
<p>
To add to the fun, your exact state is stored in localStorage. If you refresh or accidentally close the tab, your next visit will land you in the exact state you were in before you navigated away from the page!
</p>
<h1>Built by</h1>
<p>
Developed by <a target="_blank" href="http://twitter.com/tmpvar">@tmpvar</a><br />
Designed by <a target="_blank" href="http://twitter.com/R_H_2">@R_H_2</a>
</p>
<h1>Open source</h1>
<p>
As always, this project is open source! <a target="_blank" href="http://github.com/tmpvar/soundcloud-player">Fork me</a> on github!
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-633948-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Something went wrong with that request. Please try again.