Global JS var not being seen

Question

My company bought a timeline plugin and it throws an error in every browser. It still works in Chrome and FireFox but is totally busted in IE (v11)

The JS error has to do with a global variable (defined in audio.min.js) that is not being seen in a following JS file (jquery.timeline.js).

The JS files in the HTML page are listed with the JS file with the global variable, first, followed by the other JS file, where the error is being generated so that all looks right. Not sure what could cause this...

<script type="text/javascript" src="/Timeline/js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Timeline/js/audiojs/audio.min.js"></script>
<script type="text/javascript" src="/Timeline/js/jquery.timeline.js"></script>

Here is the line that causes the error:

audio.prettyPaused = 0;

The errors:

   SCRIPT1028: Expected identifier, string or number
   Unable to set property 'prettyPaused' of undefined or null reference
   Uncaught TypeError: Cannot set property 'prettyPaused' of undefined 

The var "audio" is defined in a separate JS file (audio.min.js), right at the top of the file:

//SHARED VARIABLE TO INTERACT WITH VIDEO & PRETTYPHOTO
var audio;

Here is the line in context:

//HTML5 AUDIO PLAYER 
audiojs.events.ready(function() {
    var as = audiojs.createAll({
        autoplay: true,
        loop: true
    });
    audio.prettyPaused = 0;
});

Even More Context

//jquery.timeline.js
jQuery(document).ready(function() {
    jQuery.myTimeline();
});


(function($) {

    // GLOBAL VARS
    var preload, container, tl, vidRoll, imgRoll, readBt, viewport, images, milestones, content, bar, track, dragger, marksAmount, fadeInDelay;


    // CLASS CONSTRUCTOR / INIT FUNCTION
    $.myTimeline = function() {


        //SETUP VARS
        preload = $('.preload');
        container = $('#timeline_container');
        tl = $('#timeline');
        vidRoll = $('.video_rollover');
        imgRoll = $('.image_rollover');
        readBt = $('.readmore');
        viewport = $('#timeline .viewport');
        images = $('#timeline .viewport .images');
        milestones = $('#timeline .milestones');
        content = $('#timeline .milestones .content');
        bar = $('#timeline .scrollbar');
        track = $('#timeline .scrollbar .track');
        dragger = $('#timeline .scrollbar .track .dragger');
        marksAmount = $('.marks > div').length;
        fadeInDelay = parseInt(tl.attr("data-fadeInDelay"));


        //CONFIG ALL ELEMENTS SIZES AND POSITIONS BASED ON HTML ATTRIBS
        container.css("width", tl.attr("data-width"));
        container.css("height", tl.attr("data-height"));
        images.css("width", tl.attr("data-imagesWidth"));
        viewport.css("height", tl.attr("data-imagesHeight"));
        content.css("width", tl.attr("data-contentWidth"));
        milestones.css("height", tl.attr("data-contentHeight"));
        bar.css("top", tl.attr("data-imagesHeight") - tl.attr("data-draggerHeight"));
        track.css("height", tl.attr("data-draggerHeight"));
        dragger.css("height", tl.attr("data-draggerHeight"));


        //PRELOAD & GLOBAL FADE IN
        preload.delay(fadeInDelay - 500).animate({ opacity:0 }, 500, 'easeOutQuad');
        container.delay(fadeInDelay).animate({ opacity:1 }, 1000, 'easeOutQuad');


        //HTML5 AUDIO PLAYER 
        audiojs.events.ready(function() {
            var as = audiojs.createAll({
                autoplay: true,
                loop: true
            });
            audio.prettyPaused = 0;
        });


        //PRETTYPHOTO LIGHTBOX GALLERY
        $('a[data-rel]').each(function() {
            $(this).attr('rel', $(this).data('rel'));
        });
        $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:false});


        //TIPSY - TOOLTIP
        readBt.tipsy({ gravity: 'w', fade: true, offset: 5 });


        //IMAGE ROLLOVER ICON
        imgRoll.append("<span></span>");
        imgRoll.hover(function(){
            $(this).children("span").stop(true, true).fadeIn(600);
        },function(){
            $(this).children("span").stop(true, true).fadeOut(200);
        });


        //VIDEO ROLLOVER ICON
        vidRoll.append("<span></span>");
        vidRoll.hover(function(){
            $(this).children("span").stop(true, true).fadeIn(600);
        },function(){
            $(this).children("span").stop(true, true).fadeOut(200);
        });


        //VIDEO THUMB STOPS MUSIC ON CLICK (IF PLAYING)
        vidRoll.click(function() {
            if (audio.playing) {
                audio.prettyPaused = 1;
                audio.pause();
            } else {
                audio.prettyPaused = 0;
            }
        });


        //START DRAG IMAGES FUNCTION
        startDrag(images);


        //SCROLLBAR MILESTONES MARKS
        for ( var i = 0; i < marksAmount; i++ ) {
            current = $('#m'+i);
            current.stop(true, true)
                .delay(fadeInDelay + 500)
                .animate({ left:current.attr("data-xpos"), opacity:1 }, 700 + 100*i, 'easeOutQuad')
                .show()
                .tipsy({ gravity: 's', fade: true, offset: 3, fallback: current.attr("data-label") });
        };


        //INIT SCROLLBAR
        tl.tinyscrollbar({
            wheel: 20,
            mouseWheel: tl.attr("data-mouseWheel"),
            size: tl.attr("data-width"),
            draggerWidth: tl.attr("data-draggerWidth")
        });


    } // END OF CLASS CONSTRUCTOR

Answer 1

Unable to set property 'prettyPaused' of undefined or null reference means that var audio has not been initialized, so it could be a global problem or just not initialized.

You say it gets created in that script - very well, add code below to make sure:

<script type="text/javascript" src="/Timeline/js/audiojs/audio.min.js">
    console.log(audio);
</script>

I would suspect that's going to return "undefined" or "null". Means you have to create the object or request it somehow via that script.

Answer 2

var audio; defines it, but doesn't initialize it. That's the problem. Nothing you've shown suggests that audio is actually initialized. My guess would be that audio and audiojs are probably intended to be the same thing, but that's a guess based on just what you provided.