update audio player and element

source/Ox.UI/js/Audio/AudioPlayer.js

@@ -40,6 +40,11 @@ Ox.AudioPlayer = function(options, self) {
                 self.options.shuffle = !self.options.shuffle;
                 toggleShuffle();
             },
+            time: function() {
+                self.options.time = self.options.time == 'elapsed'
+                    ? 'remaining' : 'elapsed';
+                toggleTime();
+            },
             track: function() {
                 setTrack(self.options.track);
             },
@@ -56,6 +61,7 @@ Ox.AudioPlayer = function(options, self) {
 
     self.positionSliderWidth = self.options.width - 262;
     self.tracks = self.options.audio.length;
+    self.volume = self.options.muted ? 1 : self.options.volume;
 
     self.$repeatButton = Ox.Button(
             Ox.extend({overlap: 'right', type: 'image'}, getButtonOptions('repeat'))
@@ -144,13 +150,15 @@ Ox.AudioPlayer = function(options, self) {
             borderBottomRightRadius: 0,
             fontSize: '10px'
         })
+        .bindEvent({
+            anyclick: toggleTime
+        })
         .appendTo(that);
 
     self.$positionSlider = Ox.Range({
             max: 1,
-            min: 0,
+            size: self.positionSliderWidth,
             step: 0.0000001,
-            size: self.positionSliderWidth
         })
         .css({
             left: '46px',
@@ -173,26 +181,37 @@ Ox.AudioPlayer = function(options, self) {
             right: '151px',
             top: '15px'
         })
+        .bindEvent({
+            click: toggleMuted
+        })
         .appendTo(that);
 
     self.$volumeLabel = Ox.Label({
             textAlign: 'center',
             title: '  100%',
-            width: 48
+            width: 46
         })
         .css({
-            left: self.options.width - 48 + 'px',
+            left: self.options.width - 46 + 'px',
             top: '15px',
             height: '13px',
             paddingTop: '1px',
             borderTopRightRadius: 0,
             fontSize: '10px'
         })
+        .bindEvent({
+            anyclick: function() {
+                setVolume(1);
+            }
+        })
         .appendTo(that);
 
     self.$volumeSlider = Ox.Range({
+            max: 1,
+            min: 0,
             size: 116,
-            value: self.options.volume * 100,
+            step: 0.01,
+            value: self.options.volume,
         })
         .css({
             right: '35px',
@@ -200,17 +219,13 @@ Ox.AudioPlayer = function(options, self) {
         })
         .bindEvent({
             change: function(data) {
-                self.options.volume = data.value / 100; 
+                setVolume(data.value);
-                self.$audio.volume(self.options.volume);
-                self.$volumeLabel.options({
-                    title: data.value + '%'
-                });
             }
         })
         .appendTo(that);
 
     self.$audio = Ox.AudioElement({
-            src: self.options.audio[self.options.track].src
+            src: self.options.audio[self.options.track].file
         })
         .bindEvent({
             ended: function() {
@@ -225,21 +240,31 @@ Ox.AudioPlayer = function(options, self) {
     setTrack(self.options.track);
 
     function getButtonOptions(id) {
-        if (id == 'play') {
+        var options;
-            return self.options.paused
+        if (id == 'mute') {
+            options = self.options.muted || self.options.volume == 0
+                ? {title: 'unmute', tooltip: 'Unmute'}
+                : self.options.volume < 1/3
+                ? {title: 'volumeUp', tooltip: 'Mute'}
+                : self.options.volume < 2/3
+                ? {title: 'volumeDown', tooltip: 'Mute'}
+                : {title: 'mute', tooltip: 'Mute'};
+        } else if (id == 'play') {
+            options = self.options.paused
                 ? {title: 'play', tooltip: 'Play'}
-                : {title: 'pause', tooltip: 'Pause'}
+                : {title: 'pause', tooltip: 'Pause'};
         } else if (id == 'repeat') {
-            return self.options.repeat == 0
+            options = self.options.repeat == 0
                 ? {title: 'repeatNone', tooltip: 'Repeat All'}
                 : self.options.repeat == -1
                 ? {title: 'repeatAll', tooltip: 'Repeat One'}
-                : {title: 'repeatOne', tooltip: 'Repeat None'}
+                : {title: 'repeatOne', tooltip: 'Repeat None'};
         } else if (id == 'shuffle') {
-            return self.options.shuffle
+            options = self.options.shuffle
                 ? {title: 'shuffleAll', tooltip: 'Don\'t Shuffle'}
                 : {title: 'shuffleNone', tooltip: 'Shuffle'};
         }
+        return options;
     }
 
     function getNextTrack() {
@@ -265,19 +290,14 @@ Ox.AudioPlayer = function(options, self) {
     }
 
     function setPosition(position, from) {
+        self.options.position = position;
         if (from != 'video') {
             self.$audio.currentTime(position);
         }
         self.$positionSlider.options({
             value: position / self.duration
         });
-        self.$positionLabel.options({
+        setTime();
-            title: Ox.formatDuration(
-                self.options.time == 'elapsed'
-                ? self.options.position
-                : self.options.duration - self.options.position
-            )
-        });
     }
 
     function setRepeat(repeat) {
@@ -289,6 +309,17 @@ Ox.AudioPlayer = function(options, self) {
         
     }
 
+    function setTime() {
+        self.$positionLabel.options({
+            title: Ox.formatDuration(
+                self.options.time == 'elapsed'
+                ? self.options.position
+                : self.options.audio[self.options.track].duration / 1000
+                - self.options.position
+            )
+        });
+    }
+
     function setTrack(track) {
         var data = self.options.audio[track];
         self.options.track = track;
@@ -297,17 +328,27 @@ Ox.AudioPlayer = function(options, self) {
                 data.title, data.artist, data.album, data.year
             ].join(' &mdash; ')
         });
-        self.$audio.options({src: self.options.audio[self.options.track].src});
+        self.$audio.options({src: self.options.audio[self.options.track].file});
         !self.options.paused && self.$audio.play();
         that.triggerEvent('track', {track: self.options.track});
     }
 
     function setVolume(volume) {
-    
+        self.options.volume = volume; 
+        if (volume > 0) {
+            self.volume = volume;
+        }
+        self.$audio.volume(volume);
+        self.$muteButton.options(getButtonOptions('mute'));
+        self.$volumeSlider.options({value: volume});
+        self.$volumeLabel.options({
+            title: '&nbsp;&nbsp;' + Math.round(volume * 100) + '%'
+        });
     }
 
     function toggleMuted() {
-    
+        self.options.muted = !self.options.muted;
+        setVolume(self.options.muted ? 0 : self.volume);
     }
 
     function togglePaused() {
@@ -328,6 +369,12 @@ Ox.AudioPlayer = function(options, self) {
         self.$shuffleButton.options(getButtonOptions('shuffle'))
     }
 
+    function toggleTime() {
+        self.options.time = self.options.time == 'remaining'
+            ? 'elapsed' : 'remaining';
+        setTime();
+    }
+
     return that;
 
 };