js/soundcite.js

/* 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
});