Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 114 lines (103 sloc) 4.687 kB
89093ec @tmpvar initial commit
authored
1 <html>
2 <head>
4002ae2 @tmpvar rework styles, much better now
authored
3 <title>Continuous SoundCloud Player</title>
4f8ce8a @tmpvar add firefox support
authored
4 <link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>
240ae5d @tmpvar first stage refactor (progress)
authored
5 <link href='css/core.css' rel='stylesheet' type='text/css'>
9cb11bd @tmpvar move play/pause button styling out of js
authored
6 <script type="text/javascript" src="js/build.js"></script>
d0dcf99 @tmpvar more cleanup
authored
7 <script type="text/javascript" src="demo/downpour.fm/js/view.js"></script>
5397449 @tmpvar fix scaling and add mousemove type scrubbing
authored
8 </head>
4f8ce8a @tmpvar add firefox support
authored
9 <body>
4002ae2 @tmpvar rework styles, much better now
authored
10 <div id="ui" class="ui-box">
11 <div id="player"></div>
7d64654 @tmpvar Add meta box, fix styling, groups, help, about, etc
authored
12
4002ae2 @tmpvar rework styles, much better now
authored
13 <div id="playlist">
1fc8eb1 @tmpvar Fix: cleanup tab bar and group help
authored
14 <div id="buttons">
4002ae2 @tmpvar rework styles, much better now
authored
15 <ul>
16 <li class="unselectable playlist"><a href="#playlist">playlist (<span class="count">0</span>)</a></li>
17 <li class="unselectable groups"><a href="#groups">groups (<span class="count">0</span>)</a></li>
18 <li class="unselectable help"><a href="#help">help</a></li>
19 <li class="unselectable about"><a href="#about">about</a></li>
20 </ul>
21 </div>
22 <div class="content scroller">
4cfe876 @tmpvar add questionmark shortcut for opening the help page
authored
23 <ul class="playlist page"></ul>
4002ae2 @tmpvar rework styles, much better now
authored
24
4cfe876 @tmpvar add questionmark shortcut for opening the help page
authored
25 <div class="groups page">
4002ae2 @tmpvar rework styles, much better now
authored
26 <input type="text" name="group" class="group-name" value="" />
27 <a href="#" class="add-group">+</a>
28
29 <div class="no-groups">
4cf36ce @tmpvar be nicer
authored
30 <h1>It looks like you should add a group!</h1>
4002ae2 @tmpvar rework styles, much better now
authored
31 <p>
32 To get started, type a SoundCloud group in the box and press enter or click the plus!<br />
33 <p>
34 <p>
35 Examples include: dubstep, dnb, rock, metal, etc...
36 </p>
4cf36ce @tmpvar be nicer
authored
37 <h1>How do I find groups?</h1>
28a14fd @tmpvar Add some error checking and automatically reset if things are hosed. …
authored
38 <p>
39 Head over to <a target="_blank" href="http://soundcloud.com/groups">SoundCloud groups</a> and navigate to a group that interests you.
40 </p>
41 <p><img src="img/finding-groups.png" /></p>
42 <p>
4cf36ce @tmpvar be nicer
authored
43 Then enter the last part of the url (highlighted in red) into the group box above.
28a14fd @tmpvar Add some error checking and automatically reset if things are hosed. …
authored
44 </p>
45 <p><img src="img/enter-group-name.png" /></p>
4002ae2 @tmpvar rework styles, much better now
authored
46 </div>
47
48 <ul class="group-list"></ul>
7d64654 @tmpvar Add meta box, fix styling, groups, help, about, etc
authored
49
6852ed3 @tmpvar on first load, show groups and run a useful workflow
authored
50 </div>
7d64654 @tmpvar Add meta box, fix styling, groups, help, about, etc
authored
51
4cfe876 @tmpvar add questionmark shortcut for opening the help page
authored
52 <div class="help page">
4002ae2 @tmpvar rework styles, much better now
authored
53 <h1>Basic Usage</h1>
54 <p>
55 Using this player is simple just add some groups and you'll be off!
56 </p>
7d64654 @tmpvar Add meta box, fix styling, groups, help, about, etc
authored
57
4002ae2 @tmpvar rework styles, much better now
authored
58 <h1>Keyboard Shortcuts</h1>
59 <ul>
60 <li>up arrow - volume up</li>
61 <li>down arrow - volume down</li>
62 <li>left arrow - previous track</li>
63 <li>right arrow - next track</li>
64 <li>space - toggle pause</li>
65 <li>] - seek 500ms into the future</li>
66 <li>[ - seek 500ms into the past</li>
4cfe876 @tmpvar add questionmark shortcut for opening the help page
authored
67 <li>? - show this screen</li>
4002ae2 @tmpvar rework styles, much better now
authored
68 </p>
b05468e @tmpvar Fixes for firefox
authored
69
70 <h1>If things go horribly wrong</h1>
71 <p>
72 Click <a class="reset" href="#">here</a> and everything will be reset.
73 </p>
4002ae2 @tmpvar rework styles, much better now
authored
74 </div>
0c6981e @tmpvar a good start on theming the outer portion of the page
authored
75
4cfe876 @tmpvar add questionmark shortcut for opening the help page
authored
76 <div class="about page">
4002ae2 @tmpvar rework styles, much better now
authored
77 <h1>Another SoundCloud player?</h1>
7d64654 @tmpvar Add meta box, fix styling, groups, help, about, etc
authored
78 <p>
4002ae2 @tmpvar rework styles, much better now
authored
79 Currently, SoundCloud plays tracks in reverse chronological order. This is problematic because you will end up hearing
f123ca1 @tmpvar Fix: description of problem in copy
authored
80 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.
4002ae2 @tmpvar rework styles, much better now
authored
81 </p>
82 <p>
83 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!
84 </p>
85 <p>
5afee5c @tmpvar Copy changes, add [group name] in front of tracks in the playlist
authored
86 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!
7d64654 @tmpvar Add meta box, fix styling, groups, help, about, etc
authored
87 </p>
0c6981e @tmpvar a good start on theming the outer portion of the page
authored
88
4002ae2 @tmpvar rework styles, much better now
authored
89 <h1>Built by</h1>
90 <p>
91 Developed by <a target="_blank" href="http://twitter.com/tmpvar">@tmpvar</a><br />
04bf039 @tmpvar added rh2's twitter handle
authored
92 Designed by <a target="_blank" href="http://twitter.com/R_H_2">@R_H_2</a>
7d64654 @tmpvar Add meta box, fix styling, groups, help, about, etc
authored
93 </p>
94
4002ae2 @tmpvar rework styles, much better now
authored
95 <h1>Open source</h1>
96 <p>
4cfe876 @tmpvar add questionmark shortcut for opening the help page
authored
97 As always, this project is open source! <a target="_blank" href="http://github.com/tmpvar/soundcloud-player">Fork me</a> on github!
4002ae2 @tmpvar rework styles, much better now
authored
98 </p>
99 </div>
100 </div>
7d64654 @tmpvar Add meta box, fix styling, groups, help, about, etc
authored
101 </div>
0c6981e @tmpvar a good start on theming the outer portion of the page
authored
102 </div>
28a14fd @tmpvar Add some error checking and automatically reset if things are hosed. …
authored
103 <script type="text/javascript">
104 var _gaq = _gaq || [];
105 _gaq.push(['_setAccount', 'UA-633948-2']);
106 _gaq.push(['_trackPageview']);
107 (function() {
108 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
109 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
110 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
111 })();
112 </script>
89093ec @tmpvar initial commit
authored
113 </body>
114 </html>
Something went wrong with that request. Please try again.