7 |
8 | *A Saturday morning hack.*
9 |
10 | ### Built with
11 |
12 | - [SoundCloud JS SDK](http://developers.soundcloud.com/docs/api/sdks#javascript)
13 | - [jQuery](http://jquery.com/)
14 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 |
3 | $(document).height($(window).height());
4 |
5 | // SC api key
6 | var client_id = '7182630dc6a6fc8aa606657648545826';
7 |
8 | // store all tracks after a search query
9 | var all_tracks = [];
10 |
11 | // timer to search only after a while
12 | var timer;
13 |
14 | // iframe that stores the SC player
15 | var iframe = $("#widget")[0];
16 |
17 | // the SC Widget object
18 | var widget;
19 |
20 | // initialize the soundcloud app
21 | SC.initialize({
22 | client_id: client_id
23 | });
24 |
25 | // on page load, start with a single song
26 | iframe.src = "http://w.soundcloud.com/player/?url=https://soundcloud.com/withlovexavier/drake-medley";
27 | widget = SC.Widget(iframe);
28 |
29 | // keyboard shortcut bindings
30 | $(document).keydown(function(e) {
31 | // this won't work if search field is focussed
32 | if (!$("#searchterm").is(':focus')) {
33 | if (e.keyCode == 39) {
34 | // right arrow key pressed, play next
35 | next();
36 | } else if (e.keyCode == 32) {
37 | // space key to toggle playback
38 | toggle();
39 | } else if (e.shiftKey && e.keyCode == 38) {
40 | // shift up
41 | volumeUp();
42 | } else if (e.shiftKey && e.keyCode == 40) {
43 | // shift down
44 | volumeDown();
45 | }
46 | }
47 | });
48 |
49 | // bind events to the widget
50 | widget.bind(SC.Widget.Events.READY, function() {
51 | // when the track finishes, play the next one
52 | widget.bind(SC.Widget.Events.FINISH, function(e) {
53 | next();
54 | });
55 | });
56 |
57 | // main function that handles searching
58 | $('#searchterm').keyup(function(event) {
59 |
60 | event.preventDefault();
61 |
62 | // google analytics
63 | ga('send', 'event', 'input', 'search');
64 |
65 | var q = $("#searchterm").val();
66 |
67 | // validate query
68 | if (q == '' || q == undefined) {
69 | return;
70 | }
71 |
72 | if (event.keyCode == 17 || event.keyCode == 18 || event.keyCode == 91 ||
73 | event.keyCode == 9 || event.keyCode == 16) {
74 | // control, option, command, tab, shift
75 | return;
76 | }
77 |
78 | clearTimeout(timer);
79 |
80 | timer = setTimeout(function() {
81 | instaSearch(q);
82 | }, 200); // wait for 200ms after search query
83 |
84 | });
85 |
86 | // searches and plays a track
87 | function instaSearch(q) {
88 | SC.get('/tracks', { q: q, limit: 10 }, function(tracks) {
89 | if (tracks.length == 0) {
90 | cleanUpSpace();
91 | $('#error').append('No tracks found');
92 | } else {
93 | all_tracks = tracks;
94 | var track = all_tracks.splice(0, 1)[0];
95 | playTrack(track);
96 | }
97 | });
98 | }
99 |
100 | // takes a track from SoundCloud and plays it.
101 | function playTrack(track) {
102 | ga('send', 'event', 'play', 'songPla');
103 | cleanUpSpace();
104 | // console.log(track.uri);
105 | // update the iframe source
106 | widget.load(track.uri, {
107 | auto_play: true,
108 | buying: false,
109 | sharing: false,
110 | show_playcount: false,
111 | show_comments: false
112 | });
113 |
114 | // set the title of the track
115 | $('#trackname').text(track.title);
116 |
117 | // console.log("loaded " + track.title);
118 | }
119 |
120 | // toggle play and paused state of audio player
121 | var toggle = function() {
122 | widget.toggle();
123 | }
124 |
125 | // play the next song in queue and remove the track that
126 | // is to be played.
127 | var next = function() {
128 | if (all_tracks.length != 0) {
129 | var track = all_tracks.splice(0, 1)[0];
130 | playTrack(track);
131 | } else {
132 | cleanUpSpace();
133 | $('#error').append('No more songs. Try searching.');
134 | $('#searchterm').focus();
135 | }
136 | }
137 |
138 | var volumeUp = function() {
139 | widget.getVolume(function(volume) {
140 | widget.setVolume(Math.min(100, volume + 5));
141 | });
142 | }
143 |
144 | var volumeDown = function() {
145 | widget.getVolume(function(volume) {
146 | widget.setVolume(Math.max(0, volume - 5));
147 | });
148 | }
149 |
150 | var cleanUpSpace = function() {
151 | $('#widget').empty();
152 | $('#error').empty();
153 | }
154 |
155 | });
156 |
157 |
158 |
--------------------------------------------------------------------------------
/hn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/karan/scInstant/81c442f1a23d99dfc16740e8786a362aa3936eea/hn.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
19 |
20 | space - play/pause, right arrow - next song, shift up/down - volume