Create soundcite.js

js/soundcite.js

@@ -0,0 +1,398 @@
+/* soundcite - v0.5.1 - 2017-07-10
+ * Copyright (c) 2017 Tyler J. Fisher and Northwestern University Knight Lab
+ */
+(function(window, document, callback) {
+    var loaded_p = true;
+    var loaded_s = true;
+    var insertionPoint = document.head || document.getElementsByTagName("head").item(0) || document.documentElement.childNodes[0];
+
+    function cmp_vers(v1, v2) {
+        var a1 = v1.split(".");
+        var a2 = v2.split(".");
+        for (var i = 0; i < Math.min(a1.length, a2.length); i++) {
+            var n1 = parseInt(a1[i]);
+            var n2 = parseInt(a2[i]);
+            var d = n1 - n2;
+            if (d) {
+                return d
+            }
+        }
+        return a1.length - a2.length
+    }
+
+    function load_popcorn(version, cb) {
+        var js = window.Popcorn,
+            d, new_js;
+        if (loaded_p) {
+            cb(js)
+        } else if (!js || cmp_vers(version, js.version) > 0 || cb(js)) {
+            var script = document.createElement("script");
+            script.type = "text/javascript";
+            script.src = "https://cdn.knightlab.com/libs/soundcite/latest/vendor/popcorn.min.js";
+            script.onload = script.onreadystatechange = function() {
+                if (!loaded_p && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
+                    new_js = window.Popcorn;
+                    if (js) {
+                        window.Popcorn = js
+                    }
+                    cb(new_js, loaded_p = true);
+                    insertionPoint.removeChild(script)
+                }
+            };
+            insertionPoint.appendChild(script)
+        }
+    }
+
+    function load_soundcloud(version, cb) {
+        var js = window.SC,
+            d;
+        if (loaded_s) {
+            cb(js)
+        } else if (!js || !js.Dialog || cmp_vers(version, js._version) > 0 || cb(js)) {
+            var script = document.createElement("script");
+            script.type = "text/javascript";
+            script.src = "//connect.soundcloud.com/sdk-2.0.0.js";
+            script.onload = script.onreadystatechange = function() {
+                if (!loaded_s && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
+                    cb(window.SC, loaded_s = true);
+                    insertionPoint.removeChild(script)
+                }
+            };
+            insertionPoint.appendChild(script)
+        }
+    }
+
+    function r(f) {
+        if (/in/.test(document.readyState)) {
+            setTimeout(function() {
+                r(f)
+            }, 9)
+        } else {
+            f()
+        }
+    }
+    r(function() {
+        var elements = document.getElementsByClassName("soundcite");
+        for (var i = 0; i < elements.length; i++) {
+            if (elements[i].getAttribute("data-url")) {
+                loaded_p = false
+            } else {
+                loaded_s = false
+            }
+        }
+        load_popcorn("1.5.6", function(p) {
+            load_soundcloud("2.0.0", function(s) {
+                callback(elements, p, s)
+            })
+        })
+    })
+})(window, document, function(soundcite_elements, $Popcorn, $SoundCloud) {
+    var SOUNDCITE_CONFIG = {
+        soundcloud_client_id: "5f016c08c2201881c4217afd5f52e065"
+    };
+    for (var key in window.SOUNDCITE_CONFIG) {
+        SOUNDCITE_CONFIG[key] = window.SOUNDCITE_CONFIG[key]
+    }
+    var rgb = normalize_background_color(SOUNDCITE_CONFIG.background_color);
+    if (rgb) {
+        SOUNDCITE_CONFIG.background_color = rgb.join(",")
+    } else {
+        SOUNDCITE_CONFIG.background_color = "0,0,0"
+    }
+    var style = document.createElement("style");
+    style.type = "text/css";
+    style.innerHTML = ".soundcite-loaded { background-color: rgba(" + SOUNDCITE_CONFIG.background_color + ",.15) }";
+    document.getElementsByTagName("head")[0].appendChild(style);
+    var bind = function(func, context) {
+        var slice = Array.prototype.slice;
+        var args = slice.call(arguments, 2);
+        return function() {
+            return func.apply(context, args.concat(slice.call(arguments)))
+        }
+    };
+
+    function removeClass(el, name) {
+        var cn = el.className;
+        for (var i = 0, arr = name.match(/\S+/g); i < arr.length; i++) {
+            cn = cn.replace(new RegExp("(?:^|\\s)" + arr[i] + "(?!\\S)"), "")
+        }
+        el.className = cn
+    }
+
+    function addClass(el, name) {
+        var cn = el.className;
+        for (var i = 0, arr = name.match(/\S+/g); i < arr.length; i++) {
+            if (!cn.match(new RegExp("(?:^|\\s)" + arr[i] + "(?!\\S)"))) {
+                cn += " " + arr[i]
+            }
+        }
+        el.className = cn
+    }
+
+    function normalize_background_color(str) {
+        if (!str) return null;
+        var rgb = [];
+        var RGB_PATTERN = /^(?:rgb|rgba)?\(?(\d+),(\d+),(\d+).*\)?$/;
+        var match_group = str.match(RGB_PATTERN);
+        if (match_group) {
+            var red = parseInt(match_group[1]);
+            var green = parseInt(match_group[2]);
+            var blue = parseInt(match_group[3]);
+            rgb = [red, green, blue]
+        } else {
+            var HEX_PATTERN = /^#?([0-9A-F]{1,2})([0-9A-F]{1,2})([0-9A-F]{1,2})$/i;
+            var match_group = str.match(HEX_PATTERN);
+            if (match_group) {
+                function hex_to_int(hex) {
+                    if (hex.length == 1) hex = hex + hex;
+                    return parseInt(hex, 16)
+                }
+                var red = hex_to_int(match_group[1]);
+                var green = hex_to_int(match_group[2]);
+                var blue = hex_to_int(match_group[3]);
+                rgb = [red, green, blue]
+            }
+        }
+
+        function valid_color(i) {
+            return !isNaN(i) && i >= 0 && i <= 255
+        }
+        if (rgb && valid_color(rgb[0]) && valid_color(rgb[1]) && valid_color(rgb[2])) {
+            return rgb
+        }
+        return null
+    }
+    var update_playing_element = function(el, percentage) {
+        var color = SOUNDCITE_CONFIG.background_color || "0,0,0";
+        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) + "%);"
+    };
+    window.soundcite = {};
+    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+        soundcite.mobile = true
+    } else {
+        soundcite.mobile = false
+    }
+    var clips = [];
+    var audio_container = document.createElement("div");
+    addClass(audio_container, "soundcite-audio");
+    document.getElementsByTagName("body")[0].appendChild(audio_container);
+    if ($SoundCloud) {
+        $SoundCloud.initialize({
+            client_id: SOUNDCITE_CONFIG["soundcloud_client_id"]
+        })
+    }
+
+    function pause_all_clips(except_clip) {
+        for (var i = 0; i < clips.length; i++) {
+            if (clips[i].playing) {
+                if (!except_clip || except_clip.el !== clips[i].el) {
+                    clips[i].pause()
+                }
+            }
+        }
+    }
+
+    function Clip(el) {
+        this.el = el;
+        this.start = el.hasAttribute("data-start") ? el.getAttribute("data-start") : 0;
+        this.end = el.hasAttribute("data-end") ? el.getAttribute("data-end") : null;
+        this.plays = el.hasAttribute("data-plays") ? parseInt(el.getAttribute("data-plays")) : 1;
+        this.plays_left = this.plays;
+        this.playing = false;
+        this.sound = null;
+        clips.push(this)
+    }
+    Clip.prototype.sound_loaded = function() {
+        this.el.addEventListener("click", bind(this.click_handler, this));
+        addClass(this.el, "soundcite-loaded soundcite-play")
+    };
+    Clip.prototype.pause = function() {
+        removeClass(this.el, "soundcite-pause");
+        addClass(this.el, "soundcite-play");
+        this.pause_sound();
+        this.playing = false
+    };
+    Clip.prototype.stop = function() {
+        removeClass(this.el, "soundcite-pause");
+        addClass(this.el, "soundcite-play");
+        this.stop_sound();
+        this.playing = false;
+        this.plays_left = this.plays
+    };
+    Clip.prototype.track_progress = function() {
+        var totalTime = this.end - this.start;
+        var position = this.sound_position();
+        var relative_position = position - this.start;
+        var percentage = relative_position * 100 / totalTime;
+        var update_function = SOUNDCITE_CONFIG.update_playing_element || update_playing_element;
+        update_function(this.el, percentage)
+    };
+    Clip.prototype.click_handler = function(event) {
+        event.preventDefault();
+        pause_all_clips(this);
+        if (this.playing) {
+            this.pause()
+        } else {
+            this.play()
+        }
+    };
+
+    function SoundCloudClip(el) {
+        Clip.apply(this, Array.prototype.slice.call(arguments));
+        this.id = el.getAttribute("data-id");
+        $SoundCloud.stream(this.id, bind(function(sound) {
+            this.sound = sound;
+            this.sound._player.on("positionChange", bind(function(pos) {
+                this.track_progress();
+                if (pos >= this.end) {
+                    if (this.plays) {
+                        this.plays_left--;
+                        if (this.plays_left > 0) {
+                            this.play();
+                            this.track_position()
+                        } else {
+                            this.stop()
+                        }
+                    } else {
+                        this.play();
+                        this.track_position()
+                    }
+                }
+            }, this));
+            if (this.end === null) {
+                this.end = this.sound.getDuration()
+            }
+            this.sound_loaded()
+        }, this))
+    }
+    SoundCloudClip.prototype = Object.create(Clip.prototype);
+    SoundCloudClip.prototype.sound_position = function() {
+        return this.sound.getCurrentPosition()
+    };
+    SoundCloudClip.prototype.pause_sound = function() {
+        this.sound.pause()
+    };
+    SoundCloudClip.prototype.stop_sound = function() {
+        this.sound.stop()
+    };
+    SoundCloudClip.prototype.play = function() {
+        var pos = this.sound_position();
+        if (pos < this.start || pos >= this.end) {
+            this.sound.seek(this.start)
+        }
+        removeClass(this.el, "soundcite-play");
+        addClass(this.el, "soundcite-pause");
+        this.sound.play();
+        this.playing = true
+    };
+
+    function PopcornClip(el) {
+        Clip.apply(this, Array.prototype.slice.call(arguments));
+        this.id = "soundcite-audio-" + clips.length;
+        this.url = el.getAttribute("data-url");
+        this.start = Math.floor(this.start / 1e3);
+        if (this.end !== null) {
+            this.end = Math.floor(this.end / 1e3)
+        }
+        var audio = document.createElement("audio");
+        audio.id = this.id;
+        audio.setAttribute("src", this.url);
+        audio.setAttribute("preload", "true");
+        audio_container.appendChild(audio);
+        this.sound = $Popcorn("#" + this.id, {
+            frameAnimation: true
+        });
+        this.sound.on("loadeddata", bind(function() {
+            if (this.end === null) {
+                this.end = this.sound.duration()
+            }
+            this.sound.cue(this.end, bind(function() {
+                if (this.plays) {
+                    this.plays_left--;
+                    if (this.plays_left > 0) {
+                        this.sound.currentTime(this.start);
+                        this.play()
+                    } else {
+                        this.stop();
+                        this.sound.currentTime(this.start)
+                    }
+                } else {
+                    this.sound.currentTime(this.start);
+                    this.play()
+                }
+            }, this));
+            if (!soundcite.mobile) {
+                this.sound_loaded()
+            }
+        }, this));
+        if (soundcite.mobile) {
+            this.sound_loaded()
+        } else if (this.sound.readyState() > 1) {
+            this.sound_loaded()
+        }
+    }
+    PopcornClip.prototype = Object.create(Clip.prototype);
+    PopcornClip.prototype.sound_position = function() {
+        return this.sound.currentTime()
+    };
+    PopcornClip.prototype.pause_sound = function() {
+        this.sound.pause();
+        this.sound.off("timeupdate")
+    };
+    PopcornClip.prototype.stop_sound = function() {
+        this.sound.pause();
+        this.sound.off("timeupdate")
+    };
+    PopcornClip.prototype._play_sound = function() {
+        removeClass(this.el, "soundcite-loading soundcite-play");
+        addClass(this.el, "soundcite-pause");
+        this.sound.play();
+        this.playing = true;
+        this.sound.on("timeupdate", bind(this.track_progress, this))
+    };
+    PopcornClip.prototype.play_sound = function() {
+        var pos = this.sound.roundTime();
+        if (pos < this.start || pos >= this.end) {
+            this.sound.on("seeked", bind(function() {
+                this.sound.off("seeked");
+                this._play_sound()
+            }, this));
+            this.sound.currentTime(this.start)
+        } else {
+            this._play_sound()
+        }
+    };
+    PopcornClip.prototype.play = function() {
+        if (soundcite.mobile) {
+            removeClass(this.el, "soundcite-play");
+            addClass(this.el, "soundcite-loading");
+            if (this.sound.readyState() > 1) {
+                this.play_sound()
+            } else {
+                this.sound.on("canplaythrough", bind(function() {
+                    this.play_sound()
+                }, this));
+                document.getElementById(this.id).load()
+            }
+        } else {
+            this.play_sound()
+        }
+    };
+    for (var i = 0; i < soundcite_elements.length; i++) {
+        var el = soundcite_elements[i];
+        if (el.getAttribute("data-url")) {
+            new PopcornClip(el)
+        } else if (el.getAttribute("data-id")) {
+            new SoundCloudClip(el)
+        } else {
+            console.log('Unable to form Soundcite element because of missing attributes. The offending Soundcite was "' + el.textContent + '."');
+            console.log(el)
+        }
+    }
+    soundcite.Clip = Clip;
+    soundcite.SoundCloudClip = SoundCloudClip;
+    soundcite.PopcornClip = PopcornClip;
+    soundcite.clips = clips;
+    soundcite.pause_all_clips = pause_all_clips;
+    soundcite.normalize_background_color = normalize_background_color
+});