diff --git a/examples/ui/audio_player/css/example.css b/examples/ui/audio_player/css/example.css
new file mode 100644
index 00000000..ffd0bb06
--- /dev/null
+++ b/examples/ui/audio_player/css/example.css
@@ -0,0 +1,5 @@
+.OxTableList .OxItem .OxCell > img.playing {
+ width: 10px;
+ height: 10px;
+ margin: 2px 0 0 -1px;
+}
\ No newline at end of file
diff --git a/examples/ui/audio_player/index.html b/examples/ui/audio_player/index.html
new file mode 100644
index 00000000..9ea928b5
--- /dev/null
+++ b/examples/ui/audio_player/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Audio Player
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/ui/audio_player/js/example.js b/examples/ui/audio_player/js/example.js
new file mode 100644
index 00000000..91d736d8
--- /dev/null
+++ b/examples/ui/audio_player/js/example.js
@@ -0,0 +1,253 @@
+/*
+...
+*/
+
+'use strict';
+
+Ox.load('UI', function() {
+
+ var paused = true,
+ track = 0,
+ tracks = [
+ {
+ album: 'The Grey Album',
+ artist: 'Danger Mouse',
+ duration: 160417,
+ src: 'mp3/03 Encore.mp3',
+ title: 'Encore',
+ year: '2004'
+ },
+ {
+ album: 'The Grey Album',
+ artist: 'Danger Mouse',
+ duration: 214961,
+ src: 'mp3/04 December 4th.mp3',
+ title: 'December 4th',
+ year: '2004'
+ },
+ {
+ album: 'The Grey Album',
+ artist: 'Danger Mouse',
+ duration: 246857,
+ src: 'mp3/05 99 Problems.mp3',
+ title: '99 Problems',
+ year: '2004'
+ }
+ ],
+
+ $toolbar = Ox.Bar({size: 39}),
+
+ $viewLabel = Ox.Label({
+ textAlign: 'center',
+ title: 'Tracks',
+ width: 61
+ })
+ .css({
+ position: 'absolute',
+ left: '4px',
+ top: '4px',
+ paddingTop: '1px',
+ borderBottomLeftRadius: 0,
+ borderBottomRightRadius: 0,
+ fontSize: '10px'
+ })
+ .appendTo($toolbar),
+
+ $viewButtons = Ox.ButtonGroup({
+ buttons: [
+ {id: 'tracks', title: 'list', tooltip: 'View Tracks'},
+ {id: 'albums', title: 'iconlist', tooltip: 'View Albums'},
+ {id: 'grid', title: 'grid', tooltip: 'View Grid'},
+ {id: 'columns', title: 'columns', tooltip: 'View Columns'}
+ ],
+ max: 1,
+ min: 1,
+ selectable: true,
+ type: 'image'
+ })
+ .css({
+ position: 'absolute',
+ left: '4px',
+ top: '19px'
+ })
+ .bindEvent({
+ change: function(data) {
+ $viewLabel.options({title: Ox.toTitleCase(data.value)});
+ }
+ })
+ .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'},
+ {id: 'tracks', title: 'Find: Tracks'},
+ {id: 'artists', title: 'Find: Artists'},
+ {id: 'albums', title: 'Find: Albums'}
+ ],
+ overlap: 'left',
+ type: 'image'
+ })
+ .css({
+ position: 'absolute',
+ right: '4px',
+ top: '4px',
+ borderBottomRightRadius: 0
+ })
+ .bindEvent({
+ change: function(data) {
+ $findLabel.options({title: data.title});
+ }
+ })
+ .appendTo($toolbar),
+
+ $findLabel = Ox.Label({
+ title: 'Find: All',
+ width: 112
+ })
+ .css({
+ position: 'absolute',
+ right: '20px',
+ top: '4px',
+ paddingTop: '1px',
+ borderBottomLeftRadius: 0,
+ borderBottomRightRadius: 0,
+ fontSize: '10px'
+ })
+ .appendTo($toolbar),
+
+ $findInput = Ox.Input({
+ clear: true,
+ width: 128
+ })
+ .css({
+ position: 'absolute',
+ right: '4px',
+ top: '19px',
+ borderTopLeftRadius: 0
+ })
+ .appendTo($toolbar),
+
+ $list = Ox.TableList({
+ columns: [
+ {
+ format: function(value) {
+ if (value) {
+ return Ox.Element('![]()
')
+ .addClass('playing')
+ .attr({src: Ox.UI.getImageURL(
+ paused ? 'symbolUnmute' : 'symbolMute'
+ )})
+ } else {
+ return Ox.Element();
+ }
+ },
+ id: 'playing',
+ title: 'Playing',
+ titleImage: 'mute',
+ visible: true,
+ width: 16
+ },
+ {
+ id: 'title',
+ operator: '+',
+ title: 'Title',
+ visible: true,
+ width: 192
+ },
+ {
+ id: 'artist',
+ operator: '+',
+ title: 'Artist',
+ visible: true,
+ width: 192
+ },
+ {
+ id: 'album',
+ operator: '+',
+ title: 'Album',
+ visible: true,
+ width: 192
+ },
+ {
+ align: 'right',
+ id: 'year',
+ operator: '+',
+ title: 'Year',
+ visible: true,
+ width: 64
+ },
+ {
+ align: 'right',
+ format: function(value) {
+ return Ox.formatDuration(value / 1000).substr(4);
+ },
+ id: 'duration',
+ operator: '-',
+ title: 'Time',
+ visible: true,
+ width: 64
+ }
+ ],
+ columnsVisible: true,
+ items: tracks,
+ max: 1,
+ sort: [{key: 'artist', operator: '+'}],
+ unique: 'src'
+ })
+ .bindEvent({
+ open: function(data) {
+ var src = data.ids[0],
+ index = Ox.indexOf(tracks, function(track) {
+ return track.src == src;
+ });
+ if (index == track) {
+ $list.value(tracks[track].src, 'playing', true);
+ $audioPlayer.options({paused: false, position: 0});
+ } else {
+ $list.value(tracks[track].src, 'playing', false);
+ track = index;
+ $audioPlayer.options({paused: false, track: track});
+ $list.value(tracks[track].src, 'playing', true);
+ }
+ },
+ openpreview: function(data) {
+ paused = !paused;
+ $audioPlayer.options({paused: paused});
+ $list.closePreview();
+ }
+ }),
+
+ $panel = Ox.SplitPanel({
+ elements: [
+ {element: $toolbar, size: 39},
+ {element: $list}
+ ],
+ orientation: 'vertical'
+ })
+ .appendTo(Ox.$body);
+
+ $($viewButtons.find('.OxButton')[0]).css({borderTopLeftRadius: 0});
+ $($viewButtons.find('.OxButton')[3]).css({borderTopRightRadius: 0});
+ $findInput.find('input').css({borderTopLeftRadius: 0, borderTopRightRadius: 0});
+ $findInput.find('.OxButton').css({borderTopRightRadius: 0});
+
+});
diff --git a/examples/ui/audio_player/mp3/03 Encore.mp3 b/examples/ui/audio_player/mp3/03 Encore.mp3
new file mode 100644
index 00000000..2eb72e0c
Binary files /dev/null and b/examples/ui/audio_player/mp3/03 Encore.mp3 differ
diff --git a/examples/ui/audio_player/mp3/04 December 4th.mp3 b/examples/ui/audio_player/mp3/04 December 4th.mp3
new file mode 100644
index 00000000..af42f652
Binary files /dev/null and b/examples/ui/audio_player/mp3/04 December 4th.mp3 differ
diff --git a/examples/ui/audio_player/mp3/05 99 Problems.mp3 b/examples/ui/audio_player/mp3/05 99 Problems.mp3
new file mode 100644
index 00000000..bf2e995a
Binary files /dev/null and b/examples/ui/audio_player/mp3/05 99 Problems.mp3 differ