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

update audio example

Browse source
This commit is contained in:
rolux 2012-12-09 18:13:16 +01:00
parent 7e25a7a380
commit f9a5f2bf9d
9 changed files with 141 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

189
examples/ui/audio_player/js/example.js
View file

@ -12,31 +12,71 @@ Ox.load('UI', function() {
{
album: 'The Grey Album',
artist: 'Danger Mouse',
duration: 160417,
src: 'mp3/03 Encore.mp3',
bitrate: 128,
checked: true,
disc: 1,
duration: 160.417,
file: 'mp3/Danger Mouse/2004 The Grey Album/03 Encore.mp3',
genre: 'Hip-Hop',
playing: false,
size: 2556502,
title: 'Encore',
track: 3,
year: '2004'
},
{
album: 'The Grey Album',
artist: 'Danger Mouse',
duration: 214961,
src: 'mp3/04 December 4th.mp3',
title: 'December 4th',
year: '2004'
album: 'No Love Deep Web',
artist: 'Death Grips',
bitrate: 128,
checked: true,
disc: 1,
duration: 303.960,
file: 'mp3/Death Grips/2012 No Love Deep Web/03 No Love.mp3',
genre: 'Electronic',
playing: false,
size: 4863327,
title: 'No Love',
track: 3,
year: '2012'
},
{
album: 'The Grey Album',
artist: 'Danger Mouse',
duration: 246857,
src: 'mp3/05 99 Problems.mp3',
title: '99 Problems',
year: '2004'
album: 'No Love Deep Web',
artist: 'Death Grips',
bitrate: 128,
checked: true,
disc: 1,
duration: 138.370,
file: 'mp3/Death Grips/2012 No Love Deep Web/09 Deep Web.mp3',
genre: 'Electronic',
playing: false,
size: 2214303,
title: 'Deep Web',
track: 9,
year: '2012'
}
],
$toolbar = Ox.Bar({size: 39}),
$audioPlayer = Ox.AudioPlayer({
audio: tracks,
paused: true,
width: window.innerWidth - 205
})
.css({left: '4px', top: '4px'})
.bindEvent({
paused: function(data) {
paused = data.paused;
},
track: function(data) {
$list.value(tracks[track].file, 'playing', false);
track = data.track;
$list.value(tracks[track].file, 'playing', true);
}
})
.appendTo($toolbar)
.gainFocus(),
$viewLabel = Ox.Label({
textAlign: 'center',
title: 'Tracks',
@ -44,7 +84,7 @@ Ox.load('UI', function() {
})
.css({
position: 'absolute',
left: '4px',
right: '136px',
top: '4px',
paddingTop: '1px',
borderBottomLeftRadius: 0,
@ -67,7 +107,7 @@ Ox.load('UI', function() {
})
.css({
position: 'absolute',
left: '4px',
right: '136px',
top: '19px'
})
.bindEvent({
@ -77,25 +117,6 @@ Ox.load('UI', function() {
})
.appendTo($toolbar),
$audioPlayer = Ox.AudioPlayer({
audio: tracks,
paused: true,
width: window.innerWidth - 205
})
.css({left: '69px', top: '4px'})
.bindEvent({
paused: function(data) {
paused = data.paused;
},
track: function(data) {
$list.value(tracks[track].src, 'playing', false);
track = data.track;
$list.value(tracks[track].src, 'playing', true);
}
})
.appendTo($toolbar)
.gainFocus(),
$findSelect = Ox.Select({
items: [
{id: 'all', title: 'Find: All'},
@ -150,25 +171,58 @@ Ox.load('UI', function() {
columns: [
{
format: function(value) {
if (value) {
return Ox.Element('<img>')
return value
? Ox.Element('<img>')
.addClass('playing')
.attr({src: Ox.UI.getImageURL(
paused ? 'symbolUnmute' : 'symbolMute'
)})
} else {
return Ox.Element();
}
: Ox.Element();
},
id: 'playing',
removable: false,
title: 'Playing',
titleImage: 'mute',
visible: true,
width: 16
},
{
format: function(value) {
return value
? Ox.Element('<img>')
.addClass('playing')
.attr({src: Ox.UI.getImageURL(
'symbolCheck'
)})
: Ox.Element();
},
id: 'checked',
removable: false,
title: 'Checked',
titleImage: 'check',
visible: true,
width: 16
},
{
align: 'right',
id: 'disc',
operator: '+',
title: 'Disc',
titleImage: 'circle',
width: 32
},
{
align: 'right',
id: 'track',
operator: '+',
title: 'Track',
titleImage: 'square',
width: 32
},
{
id: 'title',
operator: '+',
removable: false,
title: 'Title',
visible: true,
width: 192
@ -176,6 +230,7 @@ Ox.load('UI', function() {
{
id: 'artist',
operator: '+',
removable: false,
title: 'Artist',
visible: true,
width: 192
@ -183,6 +238,7 @@ Ox.load('UI', function() {
{
id: 'album',
operator: '+',
removable: false,
title: 'Album',
visible: true,
width: 192
@ -198,35 +254,72 @@ Ox.load('UI', function() {
{
align: 'right',
format: function(value) {
return Ox.formatDuration(value / 1000).substr(4);
return Ox.formatDuration(value).substr(4);
},
id: 'duration',
operator: '-',
title: 'Time',
visible: true,
width: 64
},
{
align: 'right',
format: function(value) {
return Ox.formatValue(value, 'B');
},
id: 'size',
operator: '-',
title: 'Size',
visible: true,
width: 64
},
{
align: 'right',
format: function(value) {
return Math.round(value) + ' kbps'
},
id: 'bitrate',
operator: '-',
title: 'Bitrate',
visible: true,
width: 64
},
{
id: 'genre',
operator: '+',
title: 'Genre',
visible: true,
width: 128
}
],
columnsMovable: true,
columnsRemovable: true,
columnsResizable: true,
columnsVisible: true,
items: tracks,
max: 1,
sort: [{key: 'artist', operator: '+'}],
unique: 'src'
sort: [
{key: 'artist', operator: '+'},
{key: 'year', operator: '+'},
{key: 'disc', operator: '+'},
{key: 'track', operator: '+'}
],
unique: 'file'
})
.bindEvent({
open: function(data) {
var src = data.ids[0],
var file = data.ids[0],
index = Ox.indexOf(tracks, function(track) {
return track.src == src;
return track.file == file;
});
if (index == track) {
$list.value(tracks[track].src, 'playing', true);
$list.value(tracks[track].file, 'playing', true);
$audioPlayer.options({paused: false, position: 0});
} else {
$list.value(tracks[track].src, 'playing', false);
$list.value(tracks[track].file, 'playing', false);
track = index;
$audioPlayer.options({paused: false, track: track});
$list.value(tracks[track].src, 'playing', true);
$list.value(tracks[track].file, 'playing', true);
}
},
openpreview: function(data) {

BIN
examples/ui/audio_player/mp3/03 Encore.mp3
View file

Binary file not shown.

BIN
examples/ui/audio_player/mp3/04 December 4th.mp3
View file

Binary file not shown.

BIN
examples/ui/audio_player/mp3/05 99 Problems.mp3
View file

Binary file not shown.

BIN
examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/03 Encore.mp3 Normal file
View file

Binary file not shown.

BIN
examples/ui/audio_player/mp3/Danger Mouse/2004 The Grey Album/artwork.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/03 No Love.mp3 Normal file
View file

Binary file not shown.

BIN
examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/09 Deep Web.mp3 Normal file
View file

Binary file not shown.

BIN
examples/ui/audio_player/mp3/Death Grips/2012 No Love Deep Web/artwork.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 287 KiB