src/examples/audio/app.js

   1 //<debug>
   2 Ext.Loader.setPath({
   3     'Ext': '../../src'
   4 });
   5 //</debug>
   6
   7 /**
   8  * A simple example which demonstrates the Ext.Audio component in Sencha Touch.
   9  */
  10
  11 Ext.application({
  12     name: 'Audio',
  13
  14     startupImage: {
  15         '320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
  16         '640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
  17         '640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
  18         '768x1004': 'resources/startup/768x1004.png', //  Non-retina iPad (first and second generation) in portrait orientation
  19         '748x1024': 'resources/startup/748x1024.png', //  Non-retina iPad (first and second generation) in landscape orientation
  20         '1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
  21         '1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
  22     },
  23
  24     isIconPrecomposed: false,
  25     icon: {
  26         57: 'resources/icons/icon.png',
  27         72: 'resources/icons/icon@72.png',
  28         114: 'resources/icons/icon@2x.png',
  29         144: 'resources/icons/icon@144.png'
  30     },
  31
  32     requires: [
  33         'Ext.Audio',
  34         'Ext.Button',
  35         'Ext.tab.Panel'
  36     ],
  37
  38     launch: function() {
  39         var audioBase = {
  40             xtype: 'audio',
  41             url  : 'crash.mp3',
  42             loop : true
  43         };
  44
  45         var hiddenAudio = Ext.create('Ext.Container', {
  46             title: 'Hidden',
  47             layout: {
  48                 type: 'vbox',
  49                 pack: 'center'
  50             },
  51             items: [
  52                 {
  53                     xtype : 'button',
  54                     text  : 'Play audio',
  55                     margin: 20,
  56                     handler: function() {
  57                         var audio = this.getParent().down('audio');
  58
  59                         if (audio.isPlaying()) {
  60                             audio.pause();
  61                             this.setText('Play audio');
  62                         } else {
  63                             audio.play();
  64                             this.setText('Pause audio');
  65                         }
  66                     }
  67                 },
  68                 Ext.apply({}, audioBase, {
  69                     enableControls: false
  70                 })
  71             ]
  72         });
  73
  74         var styledAudio = Ext.create('Ext.Audio', Ext.apply({}, audioBase, {
  75             title: 'Styled',
  76             enableControls: true
  77         }));
  78
  79         var autoAudio = Ext.create('Ext.Audio', Ext.apply({}, audioBase, {
  80             title: 'autoResume',
  81             autoResume: true
  82         }));
  83
  84         var items = [];
  85
  86         if (Ext.os.is.Android) {
  87             //android devices do not support the <audio> tag controls
  88             items = [
  89                 {
  90                     xtype: 'container',
  91                     layout: {
  92                         type: 'vbox',
  93                         pack: 'center'
  94                     },
  95                     title: 'Audio Sample',
  96                     items: hiddenAudio
  97                 }
  98             ];
  99         } else {
 100             items = [hiddenAudio, styledAudio, autoAudio];
 101         }
 102
 103         Ext.create('Ext.tab.Panel', {
 104             fullscreen: true,
 105             items: items
 106         });
 107     }
 108 });
 109