From 7e25a7a3802e67d084befc858e26a8cb825314b6 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 9 Dec 2012 18:12:25 +0100 Subject: [PATCH] update audio player and element --- source/Ox.UI/js/Audio/AudioPlayer.js | 101 ++++++++++++++++++++------- 1 file changed, 74 insertions(+), 27 deletions(-) diff --git a/source/Ox.UI/js/Audio/AudioPlayer.js b/source/Ox.UI/js/Audio/AudioPlayer.js index a7d131d2..6e7b9d71 100644 --- a/source/Ox.UI/js/Audio/AudioPlayer.js +++ b/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; - self.$audio.volume(self.options.volume); - self.$volumeLabel.options({ - title: data.value + '%' - }); + setVolume(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') { - return self.options.paused + var options; + 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({ - title: Ox.formatDuration( - self.options.time == 'elapsed' - ? self.options.position - : self.options.duration - self.options.position - ) - }); + setTime(); } 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(' — ') }); - 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: '  ' + 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; }; \ No newline at end of file