0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update audio player and element

Browse source
This commit is contained in:
rolux 2012-12-09 18:12:25 +01:00
parent 7756486d83
commit 7e25a7a380
1 changed files with 74 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
source/Ox.UI/js/Audio/AudioPlayer.js
View file

@ -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(' &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;
};