Page Visibility API

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Visibility API</title>
    </head>
    <body>
        <header>
            <h1>Page Visibility API</h1>
        </header>
        <article>
            <audio id="music">
               <source src="http://www.returngis.net/wp-content/uploads/pics/2012/11/Fringe.wav" />
                <source src="http://www.returngis.net/wp-content/uploads/pics/2012/11/Fringe.mp3" />
                <source src="http://www.returngis.net/wp-content/uploads/pics/2012/11/Breaking_Bad.ogg" />
             </audio>     
            <h2>Log</h2>            
            <ul id="output"></ul>
        </article>
    </body>
</html>

CSS

body {
    font-family: "Verdana";
    font-size: 9pt;
}

header {
    padding: 15px;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
    background-color: rgb(27, 161, 226);
    color: #fff;
}

    header h1 {
        font-size: 14pt;
    }


article {
    width: 80%;
    margin: auto;
    margin-top: 20px;
}

JavaScript

function log(msg){
    var output = document.getElementById("output");
    output.innerHTML += "<li>" + msg + "</li>";
}

window.onload = function() {

    var hidden, visibilityState, visibilityChange;

    var music = document.getElementById("music");


    if (typeof document.hidden !== "undefined") {
        hidden = "hidden", visibilityChange = "visibilitychange", visibilityState = "visibilityState";
    }
    else if (typeof document.mozHidden !== "undefined") {
        hidden = "mozHidden", visibilityChange = "mozvisibilitychange", visibilityState = "mozVisibilityState";
    }
    else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden", visibilityChange = "msvisibilitychange", visibilityState = "msVisibilityState";
    }
    else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden", visibilityChange = "webkitvisibilitychange", visibilityState = "webkitVisibilityState";
    }

/*
    document.addEventListener(visibilityChange, function() {
        log("hidden: " + document[hidden]);
        log(document[visibilityState]);

        switch (document[visibilityState]) {
        case "visible":
            music.pause();
            break;
        case "hidden":
            music.play();
            break;
        }
    });
    */

    //log("hidden: " + document[hidden]);
    log(document[visibilityState]);
};