Show actual channel information

index.html

@@ -42,8 +42,8 @@
                 <div id='kbps'></div>
                 <div id='khz'></div>
                 <div class='mono-stereo'>
-                    <div id='mono' class=''></div>
-                    <div id='stereo' class='selected'></div>
+                    <div id='mono'></div>
+                    <div id='stereo'></div>
                 </div>
             </div>
             <input id='volume' type='range' min='0' max='100' step='1' value='50' />

media.js

@@ -21,12 +21,13 @@ Media = {
     },
 
     // Load from bufferArray
-    loadBuffer: function(buffer) {
+    loadBuffer: function(buffer, loadedCallback) {
         this.stop();
         this._callbacks.waiting();
 
         var loadAudioBuffer = function(buffer) {
             this._buffer = buffer;
+            loadedCallback();
             if(this.autoPlay) {
                 this.play(0);
             }
@@ -53,6 +54,12 @@ Media = {
     percentComplete: function() {
         return (this.timeElapsed() / this.duration()) * 100;
     },
+    channels: function() {
+        if(!this._buffer) {
+            return 0;
+        }
+        return this._buffer.numberOfChannels;
+    },
 
     /* Actions */
     previous: function() {

winamp.css

@@ -271,7 +271,7 @@ a:focus { outline: none; }
     background-position: -29px 0;
 }
 .stop .media-info .mono-stereo #mono.selected {
-    background-position: -29px 0;
+    background-position: -29px -12px;
 }
 
 .media-info .mono-stereo #stereo {

winamp.js

@@ -361,29 +361,47 @@ function Winamp () {
         } else {
             self.media.autoPlay = true;
             self.fileManager.bufferFromFileReference(fileReference, this._loadBuffer.bind(this));
-            self._setMetaData(fileReference.name, '128', '44');
+            self._setTitle(fileReference.name);
         }
     }
 
     // Used only for the initial load, since it must have a CORS header
     this.loadFromUrl = function(url, fileName) {
         this.fileManager.bufferFromUrl(url, this._loadBuffer.bind(this));
-        this._setMetaData(fileName, '128', '44');
+        self._setTitle(fileName);
+        this._setMetaData();
     }
 
     this._loadBuffer = function(buffer) {
         // Note, this will not happen right away
-        this.media.loadBuffer(buffer);
+        this.media.loadBuffer(buffer, this._setMetaData);
     }
 
-    this._setMetaData = function(name, kbps, khz) {
+    this._setTitle = function(name) {
         name += '  ***  ';
         self.font.setNodeToString(document.getElementById('song-title'), name);
+    }
+
+    this._setMetaData = function() {
+        var kbps = "128";
+        var khz = "44";
         self.font.setNodeToString(document.getElementById('kbps'), kbps);
         self.font.setNodeToString(document.getElementById('khz'), khz);
+        self._setChannels();
         self.updateTime();
     }
 
+    this._setChannels = function() {
+        var channels = self.media.channels();
+        document.getElementById('mono').classList.remove('selected');
+        document.getElementById('stereo').classList.remove('selected');
+        if(channels == 1) {
+            document.getElementById('mono').classList.add('selected');
+        } else if(channels == 2) { 
+            document.getElementById('stereo').classList.add('selected');
+        }
+    }
+
     /* Helpers */
     this._timeObject = function(time) {
         var minutes = Math.floor(time / 60);