Check for browser compatibility

Fixes #89

browser.js

@@ -0,0 +1,14 @@
+Browser = {
+    isCompatible: function() {
+        return this._supportsAudioApi() && this._supportsCanvas();
+    },
+
+    _supportsAudioApi: function() {
+        return !!(window.AudioContext || window.webkitAudioContext);
+    },
+    _supportsCanvas: function() {
+        return !!document.createElement('canvas').getContext;
+    }
+
+}
+

index.html

@@ -80,6 +80,10 @@
             </div>
             <a id='about' target='_blank' href='https://github.com/captbaritone/winamp2-js'></a>
         </div>
+        <div id='browser-compatibility'>
+            <p>Your browser does not support the features we need</p>
+            <p>Try using the most recent version of Chrome, Firefox or Safari</p>
+        </div>
         <p class='about'>
             by <a href='https://twitter.com/captbaritone'>@captbaritone</a>
             -
@@ -87,6 +91,7 @@
         </p>
         <script src="http://cdn.bootcss.com/jszip/2.4.0/jszip.min.js"></script>
 
+        <script src="browser.js"></script>
         <script src="file-manager.js"></script>
         <script src="visualizer.js"></script>
         <script src="media.js"></script>
@@ -95,5 +100,23 @@
         <script src="multi-display.js"></script>
         <script src="hotkeys.js"></script>
         <script src="winamp.js"></script>
+        <script type="text/javascript">
+            if(Browser.isCompatible()) {
+                winamp = Winamp.init({
+                    'volume': 50,
+                    'balance': 0,
+                    'mediaFile': {
+                        'url': "https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3",
+                        'name': "1. DJ Mike Llama - Llama Whippin' Intro"
+                    },
+                    'skinUrl': 'https://cdn.rawgit.com/captbaritone/winamp2-js/master/skins/base-2.91.wsz'
+                });
+
+                Hotkeys.init(winamp);
+            } else {
+                document.getElementById('winamp').style.display = 'none';
+                document.getElementById('browser-compatibility').style.display = 'block';
+            }
+        </script>
     </body>
 </html>

winamp.css

@@ -9,6 +9,8 @@ a:focus { outline: none; }
 
 body {
     background-color: #0072CC;
+    font-family: arial;
+    font-size: 15px;
 }
 
 #shade-time {
@@ -777,12 +779,21 @@ body {
 .about {
     position: absolute;
     bottom: 0;
-    color: #bbb;
-    font-family: arial;
-    font-size: 15px;
     color: white;
 }
 
 .about a {
     color: white;
 }
+
+#browser-compatibility {
+    display: none;
+    position: absolute;
+    width: 275px;
+    margin-top: -58px;
+    margin-left: -137px;
+    top: 40%;
+    left: 50%;
+    background: white;
+    text-align: center;
+}

winamp.js

@@ -502,15 +502,3 @@ Winamp = {
         return timeObject[0] + timeObject[1] + ':' + timeObject[2] + timeObject[3];
     }
 }
-
-winamp = Winamp.init({
-    'volume': 50,
-    'balance': 0,
-    'mediaFile': {
-        'url': "https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3",
-        'name': "1. DJ Mike Llama - Llama Whippin' Intro"
-    },
-    'skinUrl': 'https://cdn.rawgit.com/captbaritone/winamp2-js/master/skins/base-2.91.wsz'
-});
-
-Hotkeys.init(winamp);