Spaces:
Running
Running
Delete js/soundcite.js
Browse files- js/soundcite.js +0 -398
js/soundcite.js
DELETED
@@ -1,398 +0,0 @@
|
|
1 |
-
/* soundcite - v0.5.1 - 2017-07-10
|
2 |
-
* Copyright (c) 2017 Tyler J. Fisher and Northwestern University Knight Lab
|
3 |
-
*/
|
4 |
-
(function(window, document, callback) {
|
5 |
-
var loaded_p = true;
|
6 |
-
var loaded_s = true;
|
7 |
-
var insertionPoint = document.head || document.getElementsByTagName("head").item(0) || document.documentElement.childNodes[0];
|
8 |
-
|
9 |
-
function cmp_vers(v1, v2) {
|
10 |
-
var a1 = v1.split(".");
|
11 |
-
var a2 = v2.split(".");
|
12 |
-
for (var i = 0; i < Math.min(a1.length, a2.length); i++) {
|
13 |
-
var n1 = parseInt(a1[i]);
|
14 |
-
var n2 = parseInt(a2[i]);
|
15 |
-
var d = n1 - n2;
|
16 |
-
if (d) {
|
17 |
-
return d
|
18 |
-
}
|
19 |
-
}
|
20 |
-
return a1.length - a2.length
|
21 |
-
}
|
22 |
-
|
23 |
-
function load_popcorn(version, cb) {
|
24 |
-
var js = window.Popcorn,
|
25 |
-
d, new_js;
|
26 |
-
if (loaded_p) {
|
27 |
-
cb(js)
|
28 |
-
} else if (!js || cmp_vers(version, js.version) > 0 || cb(js)) {
|
29 |
-
var script = document.createElement("script");
|
30 |
-
script.type = "text/javascript";
|
31 |
-
script.src = "https://cdn.knightlab.com/libs/soundcite/latest/vendor/popcorn.min.js";
|
32 |
-
script.onload = script.onreadystatechange = function() {
|
33 |
-
if (!loaded_p && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
|
34 |
-
new_js = window.Popcorn;
|
35 |
-
if (js) {
|
36 |
-
window.Popcorn = js
|
37 |
-
}
|
38 |
-
cb(new_js, loaded_p = true);
|
39 |
-
insertionPoint.removeChild(script)
|
40 |
-
}
|
41 |
-
};
|
42 |
-
insertionPoint.appendChild(script)
|
43 |
-
}
|
44 |
-
}
|
45 |
-
|
46 |
-
function load_soundcloud(version, cb) {
|
47 |
-
var js = window.SC,
|
48 |
-
d;
|
49 |
-
if (loaded_s) {
|
50 |
-
cb(js)
|
51 |
-
} else if (!js || !js.Dialog || cmp_vers(version, js._version) > 0 || cb(js)) {
|
52 |
-
var script = document.createElement("script");
|
53 |
-
script.type = "text/javascript";
|
54 |
-
script.src = "//connect.soundcloud.com/sdk-2.0.0.js";
|
55 |
-
script.onload = script.onreadystatechange = function() {
|
56 |
-
if (!loaded_s && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
|
57 |
-
cb(window.SC, loaded_s = true);
|
58 |
-
insertionPoint.removeChild(script)
|
59 |
-
}
|
60 |
-
};
|
61 |
-
insertionPoint.appendChild(script)
|
62 |
-
}
|
63 |
-
}
|
64 |
-
|
65 |
-
function r(f) {
|
66 |
-
if (/in/.test(document.readyState)) {
|
67 |
-
setTimeout(function() {
|
68 |
-
r(f)
|
69 |
-
}, 9)
|
70 |
-
} else {
|
71 |
-
f()
|
72 |
-
}
|
73 |
-
}
|
74 |
-
r(function() {
|
75 |
-
var elements = document.getElementsByClassName("soundcite");
|
76 |
-
for (var i = 0; i < elements.length; i++) {
|
77 |
-
if (elements[i].getAttribute("data-url")) {
|
78 |
-
loaded_p = false
|
79 |
-
} else {
|
80 |
-
loaded_s = false
|
81 |
-
}
|
82 |
-
}
|
83 |
-
load_popcorn("1.5.6", function(p) {
|
84 |
-
load_soundcloud("2.0.0", function(s) {
|
85 |
-
callback(elements, p, s)
|
86 |
-
})
|
87 |
-
})
|
88 |
-
})
|
89 |
-
})(window, document, function(soundcite_elements, $Popcorn, $SoundCloud) {
|
90 |
-
var SOUNDCITE_CONFIG = {
|
91 |
-
soundcloud_client_id: "5f016c08c2201881c4217afd5f52e065"
|
92 |
-
};
|
93 |
-
for (var key in window.SOUNDCITE_CONFIG) {
|
94 |
-
SOUNDCITE_CONFIG[key] = window.SOUNDCITE_CONFIG[key]
|
95 |
-
}
|
96 |
-
var rgb = normalize_background_color(SOUNDCITE_CONFIG.background_color);
|
97 |
-
if (rgb) {
|
98 |
-
SOUNDCITE_CONFIG.background_color = rgb.join(",")
|
99 |
-
} else {
|
100 |
-
SOUNDCITE_CONFIG.background_color = "0,0,0"
|
101 |
-
}
|
102 |
-
var style = document.createElement("style");
|
103 |
-
style.type = "text/css";
|
104 |
-
style.innerHTML = ".soundcite-loaded { background-color: rgba(" + SOUNDCITE_CONFIG.background_color + ",.15) }";
|
105 |
-
document.getElementsByTagName("head")[0].appendChild(style);
|
106 |
-
var bind = function(func, context) {
|
107 |
-
var slice = Array.prototype.slice;
|
108 |
-
var args = slice.call(arguments, 2);
|
109 |
-
return function() {
|
110 |
-
return func.apply(context, args.concat(slice.call(arguments)))
|
111 |
-
}
|
112 |
-
};
|
113 |
-
|
114 |
-
function removeClass(el, name) {
|
115 |
-
var cn = el.className;
|
116 |
-
for (var i = 0, arr = name.match(/\S+/g); i < arr.length; i++) {
|
117 |
-
cn = cn.replace(new RegExp("(?:^|\\s)" + arr[i] + "(?!\\S)"), "")
|
118 |
-
}
|
119 |
-
el.className = cn
|
120 |
-
}
|
121 |
-
|
122 |
-
function addClass(el, name) {
|
123 |
-
var cn = el.className;
|
124 |
-
for (var i = 0, arr = name.match(/\S+/g); i < arr.length; i++) {
|
125 |
-
if (!cn.match(new RegExp("(?:^|\\s)" + arr[i] + "(?!\\S)"))) {
|
126 |
-
cn += " " + arr[i]
|
127 |
-
}
|
128 |
-
}
|
129 |
-
el.className = cn
|
130 |
-
}
|
131 |
-
|
132 |
-
function normalize_background_color(str) {
|
133 |
-
if (!str) return null;
|
134 |
-
var rgb = [];
|
135 |
-
var RGB_PATTERN = /^(?:rgb|rgba)?\(?(\d+),(\d+),(\d+).*\)?$/;
|
136 |
-
var match_group = str.match(RGB_PATTERN);
|
137 |
-
if (match_group) {
|
138 |
-
var red = parseInt(match_group[1]);
|
139 |
-
var green = parseInt(match_group[2]);
|
140 |
-
var blue = parseInt(match_group[3]);
|
141 |
-
rgb = [red, green, blue]
|
142 |
-
} else {
|
143 |
-
var HEX_PATTERN = /^#?([0-9A-F]{1,2})([0-9A-F]{1,2})([0-9A-F]{1,2})$/i;
|
144 |
-
var match_group = str.match(HEX_PATTERN);
|
145 |
-
if (match_group) {
|
146 |
-
function hex_to_int(hex) {
|
147 |
-
if (hex.length == 1) hex = hex + hex;
|
148 |
-
return parseInt(hex, 16)
|
149 |
-
}
|
150 |
-
var red = hex_to_int(match_group[1]);
|
151 |
-
var green = hex_to_int(match_group[2]);
|
152 |
-
var blue = hex_to_int(match_group[3]);
|
153 |
-
rgb = [red, green, blue]
|
154 |
-
}
|
155 |
-
}
|
156 |
-
|
157 |
-
function valid_color(i) {
|
158 |
-
return !isNaN(i) && i >= 0 && i <= 255
|
159 |
-
}
|
160 |
-
if (rgb && valid_color(rgb[0]) && valid_color(rgb[1]) && valid_color(rgb[2])) {
|
161 |
-
return rgb
|
162 |
-
}
|
163 |
-
return null
|
164 |
-
}
|
165 |
-
var update_playing_element = function(el, percentage) {
|
166 |
-
var color = SOUNDCITE_CONFIG.background_color || "0,0,0";
|
167 |
-
el.style.cssText = "background: -webkit-linear-gradient(left, rgba(" + color + ",.15)" + percentage + "%, rgba(" + color + ",.05)" + (percentage + 1) + "%);" + "background: linear-gradient(to right, rgba(" + color + ",.15)" + percentage + "%, rgba(" + color + ",.05)" + (percentage + 1) + "%);"
|
168 |
-
};
|
169 |
-
window.soundcite = {};
|
170 |
-
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
|
171 |
-
soundcite.mobile = true
|
172 |
-
} else {
|
173 |
-
soundcite.mobile = false
|
174 |
-
}
|
175 |
-
var clips = [];
|
176 |
-
var audio_container = document.createElement("div");
|
177 |
-
addClass(audio_container, "soundcite-audio");
|
178 |
-
document.getElementsByTagName("body")[0].appendChild(audio_container);
|
179 |
-
if ($SoundCloud) {
|
180 |
-
$SoundCloud.initialize({
|
181 |
-
client_id: SOUNDCITE_CONFIG["soundcloud_client_id"]
|
182 |
-
})
|
183 |
-
}
|
184 |
-
|
185 |
-
function pause_all_clips(except_clip) {
|
186 |
-
for (var i = 0; i < clips.length; i++) {
|
187 |
-
if (clips[i].playing) {
|
188 |
-
if (!except_clip || except_clip.el !== clips[i].el) {
|
189 |
-
clips[i].pause()
|
190 |
-
}
|
191 |
-
}
|
192 |
-
}
|
193 |
-
}
|
194 |
-
|
195 |
-
function Clip(el) {
|
196 |
-
this.el = el;
|
197 |
-
this.start = el.hasAttribute("data-start") ? el.getAttribute("data-start") : 0;
|
198 |
-
this.end = el.hasAttribute("data-end") ? el.getAttribute("data-end") : null;
|
199 |
-
this.plays = el.hasAttribute("data-plays") ? parseInt(el.getAttribute("data-plays")) : 1;
|
200 |
-
this.plays_left = this.plays;
|
201 |
-
this.playing = false;
|
202 |
-
this.sound = null;
|
203 |
-
clips.push(this)
|
204 |
-
}
|
205 |
-
Clip.prototype.sound_loaded = function() {
|
206 |
-
this.el.addEventListener("click", bind(this.click_handler, this));
|
207 |
-
addClass(this.el, "soundcite-loaded soundcite-play")
|
208 |
-
};
|
209 |
-
Clip.prototype.pause = function() {
|
210 |
-
removeClass(this.el, "soundcite-pause");
|
211 |
-
addClass(this.el, "soundcite-play");
|
212 |
-
this.pause_sound();
|
213 |
-
this.playing = false
|
214 |
-
};
|
215 |
-
Clip.prototype.stop = function() {
|
216 |
-
removeClass(this.el, "soundcite-pause");
|
217 |
-
addClass(this.el, "soundcite-play");
|
218 |
-
this.stop_sound();
|
219 |
-
this.playing = false;
|
220 |
-
this.plays_left = this.plays
|
221 |
-
};
|
222 |
-
Clip.prototype.track_progress = function() {
|
223 |
-
var totalTime = this.end - this.start;
|
224 |
-
var position = this.sound_position();
|
225 |
-
var relative_position = position - this.start;
|
226 |
-
var percentage = relative_position * 100 / totalTime;
|
227 |
-
var update_function = SOUNDCITE_CONFIG.update_playing_element || update_playing_element;
|
228 |
-
update_function(this.el, percentage)
|
229 |
-
};
|
230 |
-
Clip.prototype.click_handler = function(event) {
|
231 |
-
event.preventDefault();
|
232 |
-
pause_all_clips(this);
|
233 |
-
if (this.playing) {
|
234 |
-
this.pause()
|
235 |
-
} else {
|
236 |
-
this.play()
|
237 |
-
}
|
238 |
-
};
|
239 |
-
|
240 |
-
function SoundCloudClip(el) {
|
241 |
-
Clip.apply(this, Array.prototype.slice.call(arguments));
|
242 |
-
this.id = el.getAttribute("data-id");
|
243 |
-
$SoundCloud.stream(this.id, bind(function(sound) {
|
244 |
-
this.sound = sound;
|
245 |
-
this.sound._player.on("positionChange", bind(function(pos) {
|
246 |
-
this.track_progress();
|
247 |
-
if (pos >= this.end) {
|
248 |
-
if (this.plays) {
|
249 |
-
this.plays_left--;
|
250 |
-
if (this.plays_left > 0) {
|
251 |
-
this.play();
|
252 |
-
this.track_position()
|
253 |
-
} else {
|
254 |
-
this.stop()
|
255 |
-
}
|
256 |
-
} else {
|
257 |
-
this.play();
|
258 |
-
this.track_position()
|
259 |
-
}
|
260 |
-
}
|
261 |
-
}, this));
|
262 |
-
if (this.end === null) {
|
263 |
-
this.end = this.sound.getDuration()
|
264 |
-
}
|
265 |
-
this.sound_loaded()
|
266 |
-
}, this))
|
267 |
-
}
|
268 |
-
SoundCloudClip.prototype = Object.create(Clip.prototype);
|
269 |
-
SoundCloudClip.prototype.sound_position = function() {
|
270 |
-
return this.sound.getCurrentPosition()
|
271 |
-
};
|
272 |
-
SoundCloudClip.prototype.pause_sound = function() {
|
273 |
-
this.sound.pause()
|
274 |
-
};
|
275 |
-
SoundCloudClip.prototype.stop_sound = function() {
|
276 |
-
this.sound.stop()
|
277 |
-
};
|
278 |
-
SoundCloudClip.prototype.play = function() {
|
279 |
-
var pos = this.sound_position();
|
280 |
-
if (pos < this.start || pos >= this.end) {
|
281 |
-
this.sound.seek(this.start)
|
282 |
-
}
|
283 |
-
removeClass(this.el, "soundcite-play");
|
284 |
-
addClass(this.el, "soundcite-pause");
|
285 |
-
this.sound.play();
|
286 |
-
this.playing = true
|
287 |
-
};
|
288 |
-
|
289 |
-
function PopcornClip(el) {
|
290 |
-
Clip.apply(this, Array.prototype.slice.call(arguments));
|
291 |
-
this.id = "soundcite-audio-" + clips.length;
|
292 |
-
this.url = el.getAttribute("data-url");
|
293 |
-
this.start = Math.floor(this.start / 1e3);
|
294 |
-
if (this.end !== null) {
|
295 |
-
this.end = Math.floor(this.end / 1e3)
|
296 |
-
}
|
297 |
-
var audio = document.createElement("audio");
|
298 |
-
audio.id = this.id;
|
299 |
-
audio.setAttribute("src", this.url);
|
300 |
-
audio.setAttribute("preload", "true");
|
301 |
-
audio_container.appendChild(audio);
|
302 |
-
this.sound = $Popcorn("#" + this.id, {
|
303 |
-
frameAnimation: true
|
304 |
-
});
|
305 |
-
this.sound.on("loadeddata", bind(function() {
|
306 |
-
if (this.end === null) {
|
307 |
-
this.end = this.sound.duration()
|
308 |
-
}
|
309 |
-
this.sound.cue(this.end, bind(function() {
|
310 |
-
if (this.plays) {
|
311 |
-
this.plays_left--;
|
312 |
-
if (this.plays_left > 0) {
|
313 |
-
this.sound.currentTime(this.start);
|
314 |
-
this.play()
|
315 |
-
} else {
|
316 |
-
this.stop();
|
317 |
-
this.sound.currentTime(this.start)
|
318 |
-
}
|
319 |
-
} else {
|
320 |
-
this.sound.currentTime(this.start);
|
321 |
-
this.play()
|
322 |
-
}
|
323 |
-
}, this));
|
324 |
-
if (!soundcite.mobile) {
|
325 |
-
this.sound_loaded()
|
326 |
-
}
|
327 |
-
}, this));
|
328 |
-
if (soundcite.mobile) {
|
329 |
-
this.sound_loaded()
|
330 |
-
} else if (this.sound.readyState() > 1) {
|
331 |
-
this.sound_loaded()
|
332 |
-
}
|
333 |
-
}
|
334 |
-
PopcornClip.prototype = Object.create(Clip.prototype);
|
335 |
-
PopcornClip.prototype.sound_position = function() {
|
336 |
-
return this.sound.currentTime()
|
337 |
-
};
|
338 |
-
PopcornClip.prototype.pause_sound = function() {
|
339 |
-
this.sound.pause();
|
340 |
-
this.sound.off("timeupdate")
|
341 |
-
};
|
342 |
-
PopcornClip.prototype.stop_sound = function() {
|
343 |
-
this.sound.pause();
|
344 |
-
this.sound.off("timeupdate")
|
345 |
-
};
|
346 |
-
PopcornClip.prototype._play_sound = function() {
|
347 |
-
removeClass(this.el, "soundcite-loading soundcite-play");
|
348 |
-
addClass(this.el, "soundcite-pause");
|
349 |
-
this.sound.play();
|
350 |
-
this.playing = true;
|
351 |
-
this.sound.on("timeupdate", bind(this.track_progress, this))
|
352 |
-
};
|
353 |
-
PopcornClip.prototype.play_sound = function() {
|
354 |
-
var pos = this.sound.roundTime();
|
355 |
-
if (pos < this.start || pos >= this.end) {
|
356 |
-
this.sound.on("seeked", bind(function() {
|
357 |
-
this.sound.off("seeked");
|
358 |
-
this._play_sound()
|
359 |
-
}, this));
|
360 |
-
this.sound.currentTime(this.start)
|
361 |
-
} else {
|
362 |
-
this._play_sound()
|
363 |
-
}
|
364 |
-
};
|
365 |
-
PopcornClip.prototype.play = function() {
|
366 |
-
if (soundcite.mobile) {
|
367 |
-
removeClass(this.el, "soundcite-play");
|
368 |
-
addClass(this.el, "soundcite-loading");
|
369 |
-
if (this.sound.readyState() > 1) {
|
370 |
-
this.play_sound()
|
371 |
-
} else {
|
372 |
-
this.sound.on("canplaythrough", bind(function() {
|
373 |
-
this.play_sound()
|
374 |
-
}, this));
|
375 |
-
document.getElementById(this.id).load()
|
376 |
-
}
|
377 |
-
} else {
|
378 |
-
this.play_sound()
|
379 |
-
}
|
380 |
-
};
|
381 |
-
for (var i = 0; i < soundcite_elements.length; i++) {
|
382 |
-
var el = soundcite_elements[i];
|
383 |
-
if (el.getAttribute("data-url")) {
|
384 |
-
new PopcornClip(el)
|
385 |
-
} else if (el.getAttribute("data-id")) {
|
386 |
-
new SoundCloudClip(el)
|
387 |
-
} else {
|
388 |
-
console.log('Unable to form Soundcite element because of missing attributes. The offending Soundcite was "' + el.textContent + '."');
|
389 |
-
console.log(el)
|
390 |
-
}
|
391 |
-
}
|
392 |
-
soundcite.Clip = Clip;
|
393 |
-
soundcite.SoundCloudClip = SoundCloudClip;
|
394 |
-
soundcite.PopcornClip = PopcornClip;
|
395 |
-
soundcite.clips = clips;
|
396 |
-
soundcite.pause_all_clips = pause_all_clips;
|
397 |
-
soundcite.normalize_background_color = normalize_background_color
|
398 |
-
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|