add rudimentary Ox.AudioPlayer and Ox.AudioElement
This commit is contained in:
rolux
parent
7dac327396
commit
074b658814
2 changed files with 451 additions and 0 deletions
118
source/Ox.UI/js/Audio/AudioElement.js
Normal file
118
source/Ox.UI/js/Audio/AudioElement.js
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.AudioElement <f> AudioElement Object
|
||||
@*/
|
||||
|
||||
Ox.AudioElement = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
autoplay: false,
|
||||
preload: 'none',
|
||||
src: ''
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
src: function() {
|
||||
self.audio.src = self.options.src;
|
||||
}
|
||||
});
|
||||
|
||||
self.loadedMetadata = false;
|
||||
self.paused = true;
|
||||
self.$audio = $('<audio>')
|
||||
.attr({src: self.options.src})
|
||||
.on({
|
||||
ended: function() {
|
||||
that.triggerEvent('ended');
|
||||
},
|
||||
loadedmetadata: function() {
|
||||
that.triggerEvent('loadedmetadata', {
|
||||
duration: self.audio.duration
|
||||
});
|
||||
},
|
||||
seeked: function() {
|
||||
that.triggerEvent('seeked');
|
||||
},
|
||||
seeking: function() {
|
||||
that.triggerEvent('seeking');
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
self.audio = self.$audio[0];
|
||||
|
||||
function getset(key, value) {
|
||||
var ret;
|
||||
if (Ox.isUndefined(value)) {
|
||||
ret = self.audio[key];
|
||||
} else {
|
||||
self.audio[key] = value;
|
||||
ret = that;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
/*@
|
||||
currentTime <f> get/set currentTime
|
||||
@*/
|
||||
that.currentTime = function() {
|
||||
var ret;
|
||||
self.ended = false;
|
||||
if (arguments.length == 0) {
|
||||
ret = self.audio.currentTime;
|
||||
} else {
|
||||
self.audio.currentTime = arguments[0];
|
||||
ret = that;
|
||||
}
|
||||
return ret;
|
||||
};
|
||||
|
||||
/*@
|
||||
pause <f> pause
|
||||
@*/
|
||||
that.pause = function() {
|
||||
self.paused = true;
|
||||
self.audio.pause();
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
play <f> play
|
||||
@*/
|
||||
that.play = function() {
|
||||
if (self.ended) {
|
||||
that.currentTime(0);
|
||||
self.ended = false;
|
||||
}
|
||||
self.paused = false;
|
||||
self.audio.play();
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
src <f> get/set source
|
||||
@*/
|
||||
that.src = function() {
|
||||
var ret;
|
||||
if (arguments.length == 0) {
|
||||
ret = self.audio.src;
|
||||
} else {
|
||||
self.options.src = arguments[0];
|
||||
self.audio.src = self.options.src;
|
||||
ret = that;
|
||||
}
|
||||
return ret;
|
||||
};
|
||||
|
||||
/*@
|
||||
volume <f> get/set volume
|
||||
@*/
|
||||
that.volume = function(value) {
|
||||
return getset('volume', arguments[0]);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
333
source/Ox.UI/js/Audio/AudioPlayer.js
Normal file
333
source/Ox.UI/js/Audio/AudioPlayer.js
Normal file
|
|
@ -0,0 +1,333 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.AudioPlayer <f> Generic Audio Player
|
||||
@*/
|
||||
|
||||
Ox.AudioPlayer = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
audio: [],
|
||||
muted: false,
|
||||
paused: false,
|
||||
position: 0,
|
||||
repeat: 0,
|
||||
shuffle: false,
|
||||
time: 'elapsed',
|
||||
track: 0,
|
||||
volume: 1,
|
||||
width: 512
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
muted: function() {
|
||||
self.options.muted = !self.options.muted;
|
||||
toggleMuted();
|
||||
},
|
||||
paused: function() {
|
||||
self.options.paused = !self.options.paused;
|
||||
togglePaused();
|
||||
},
|
||||
position: function() {
|
||||
setPosition(self.options.position);
|
||||
},
|
||||
repeat: function() {
|
||||
setRepeat(self.options.repeat);
|
||||
},
|
||||
shuffle: function() {
|
||||
self.options.shuffle = !self.options.shuffle;
|
||||
toggleShuffle();
|
||||
},
|
||||
track: function() {
|
||||
setTrack(self.options.track);
|
||||
},
|
||||
volume: function() {
|
||||
setVolume(self.options.volume);
|
||||
},
|
||||
width: setSizes
|
||||
})
|
||||
.addClass('OxAudioPlayer')
|
||||
.css({width: self.options.width + 'px'})
|
||||
.bindEvent({
|
||||
key_space: togglePaused
|
||||
});
|
||||
|
||||
self.positionSliderWidth = self.options.width - 262;
|
||||
self.tracks = self.options.audio.length;
|
||||
|
||||
self.$repeatButton = Ox.Button(
|
||||
Ox.extend({overlap: 'right', type: 'image'}, getButtonOptions('repeat'))
|
||||
)
|
||||
.css({
|
||||
borderBottomLeftRadius: 0
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
setRepeat(
|
||||
self.options.repeat == 0 ? -1
|
||||
: self.options.repeat == -1 ? 1
|
||||
: 0
|
||||
);
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$shuffleButton = Ox.Button(
|
||||
Ox.extend({overlap: 'left', type: 'image'}, getButtonOptions('shuffle'))
|
||||
)
|
||||
.css({
|
||||
right: 0,
|
||||
borderBottomRightRadius: 0
|
||||
})
|
||||
.bindEvent({
|
||||
click: toggleShuffle
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$trackLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: '',
|
||||
width: self.options.width - 32
|
||||
})
|
||||
.addClass('OxTrackLabel')
|
||||
.appendTo(that);
|
||||
|
||||
self.$playButtons = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{
|
||||
id: 'current',
|
||||
title: 'playPrevious',
|
||||
tooltip: 'Play Current Track'
|
||||
},
|
||||
Ox.extend({id: 'play'}, getButtonOptions('play')),
|
||||
{
|
||||
id: 'next',
|
||||
title: 'playNext',
|
||||
tooltip: 'Play Next Track'
|
||||
}
|
||||
],
|
||||
overlap: 'right',
|
||||
type: 'image',
|
||||
})
|
||||
.css({
|
||||
top: '15px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'current') {
|
||||
setPosition(0);
|
||||
} else if (data.id == 'play') {
|
||||
togglePaused();
|
||||
} else if (data.id == 'next') {
|
||||
playNext();
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
$(self.$playButtons.find('.OxButton')[0]).css({borderTopLeftRadius: 0});
|
||||
|
||||
self.$positionLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: '00:00:00',
|
||||
tooltip: 'Show Remaining Time',
|
||||
width: 80
|
||||
})
|
||||
.css({
|
||||
left: self.positionSliderWidth + 30 + 'px',
|
||||
top: '15px',
|
||||
height: '13px',
|
||||
paddingTop: '1px',
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
fontSize: '10px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$positionSlider = Ox.Range({
|
||||
max: 1,
|
||||
min: 0,
|
||||
step: 0.0000001,
|
||||
size: self.positionSliderWidth
|
||||
})
|
||||
.css({
|
||||
left: '46px',
|
||||
top: '15px'
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
setPosition(data.value * self.duration);
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$muteButton = Ox.Button({
|
||||
overlap: 'right',
|
||||
title: 'mute',
|
||||
tooltip: 'Mute',
|
||||
type: 'image'
|
||||
})
|
||||
.css({
|
||||
right: '151px',
|
||||
top: '15px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$volumeLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: ' 100%',
|
||||
width: 48
|
||||
})
|
||||
.css({
|
||||
left: self.options.width - 48 + 'px',
|
||||
top: '15px',
|
||||
height: '13px',
|
||||
paddingTop: '1px',
|
||||
borderTopRightRadius: 0,
|
||||
fontSize: '10px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$volumeSlider = Ox.Range({
|
||||
size: 116,
|
||||
value: self.options.volume * 100,
|
||||
})
|
||||
.css({
|
||||
right: '35px',
|
||||
top: '15px'
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
self.options.volume = data.value / 100;
|
||||
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
|
||||
})
|
||||
.bindEvent({
|
||||
ended: function() {
|
||||
playNext();
|
||||
},
|
||||
loadedmetadata: function(data) {
|
||||
self.duration = data.duration;
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
setTrack(self.options.track);
|
||||
|
||||
function getButtonOptions(id) {
|
||||
if (id == 'play') {
|
||||
return self.options.paused
|
||||
? {title: 'play', tooltip: 'Play'}
|
||||
: {title: 'pause', tooltip: 'Pause'}
|
||||
} else if (id == 'repeat') {
|
||||
return self.options.repeat == 0
|
||||
? {title: 'repeatNone', tooltip: 'Repeat All'}
|
||||
: self.options.repeat == -1
|
||||
? {title: 'repeatAll', tooltip: 'Repeat One'}
|
||||
: {title: 'repeatOne', tooltip: 'Repeat None'}
|
||||
} else if (id == 'shuffle') {
|
||||
return self.options.shuffle
|
||||
? {title: 'shuffleAll', tooltip: 'Don\'t Shuffle'}
|
||||
: {title: 'shuffleNone', tooltip: 'Shuffle'};
|
||||
}
|
||||
}
|
||||
|
||||
function getNextTrack() {
|
||||
return self.options.repeat == 1 ? self.options.track
|
||||
: self.options.track < self.tracks - 1 ? self.options.track + 1
|
||||
: self.options.repeat == -1 ? 0
|
||||
: null;
|
||||
}
|
||||
|
||||
function playing() {
|
||||
self.options.position = self.$audio.currentTime();
|
||||
setPosition(self.options.position, 'video')
|
||||
that.triggerEvent('playing', {position: self.options.position});
|
||||
}
|
||||
|
||||
function playNext() {
|
||||
var track = getNextTrack();
|
||||
if (track === null) {
|
||||
|
||||
} else {
|
||||
setTrack(track);
|
||||
}
|
||||
}
|
||||
|
||||
function setPosition(position, from) {
|
||||
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
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
function setRepeat(repeat) {
|
||||
self.options.repeat = repeat;
|
||||
self.$repeatButton.options(getButtonOptions('repeat'));
|
||||
}
|
||||
|
||||
function setSizes() {
|
||||
|
||||
}
|
||||
|
||||
function setTrack(track) {
|
||||
var data = self.options.audio[track];
|
||||
self.options.track = track;
|
||||
self.$trackLabel.options({
|
||||
title: [
|
||||
data.title, data.artist, data.album, data.year
|
||||
].join(' — ')
|
||||
});
|
||||
self.$audio.options({src: self.options.audio[self.options.track].src});
|
||||
!self.options.paused && self.$audio.play();
|
||||
that.triggerEvent('track', {track: self.options.track});
|
||||
}
|
||||
|
||||
function setVolume(volume) {
|
||||
|
||||
}
|
||||
|
||||
function toggleMuted() {
|
||||
|
||||
}
|
||||
|
||||
function togglePaused() {
|
||||
self.options.paused = !self.options.paused;
|
||||
self.$playButtons.buttonOptions('play', getButtonOptions('play'));
|
||||
if (self.options.paused) {
|
||||
self.$audio.pause();
|
||||
clearInterval(self.playInterval);
|
||||
} else {
|
||||
self.$audio.play();
|
||||
self.playInterval = setInterval(playing, 100);
|
||||
}
|
||||
that.triggerEvent('paused', {paused: self.options.paused});
|
||||
}
|
||||
|
||||
function toggleShuffle() {
|
||||
self.options.shuffle = !self.options.shuffle;
|
||||
self.$shuffleButton.options(getButtonOptions('shuffle'))
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Reference in a new issue