src/src/Audio.js

   1 /**
   2  * {@link Ext.Audio} is a simple class which provides a container for the
   3  * [HTML5 Audio element](http://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video).
   4  *
   5  * ## Recommended File Types/Compression:
   6  *
   7  * * Uncompressed WAV and AIF audio
   8  * * MP3 audio
   9  * * AAC-LC
  10  * * HE-AAC audio
  11  *
  12  * ## Notes
  13  *
  14  * On Android devices, the audio tags controls do not show. You must use the {@link #method-play},
  15  * {@link #method-pause}, and {@link #toggle} methods to control the audio (example below).
  16  *
  17  * ## Examples
  18  *
  19  * This example shows the use of the {@link Ext.Audio} component in a fullscreen container--change
  20  * the url: item for the location of an audio file--note that the audio starts on page load:
  21  *
  22  *     @example preview
  23  *     Ext.create('Ext.Container', {
  24  *         fullscreen: true,
  25  *         layout: {
  26  *             type : 'vbox',
  27  *             pack : 'center',
  28  *             align: 'stretch'
  29  *         },
  30  *         items: [
  31  *             {
  32  *                 xtype : 'toolbar',
  33  *                 docked: 'top',
  34  *                 title : 'Ext.Audio'
  35  *             },
  36  *             {
  37  *                 xtype: 'audio',
  38  *                 url  : 'touch-build/examples/audio/crash.mp3'
  39  *             }
  40  *         ]
  41  *     });
  42  *
  43  * You can also set the {@link #hidden} configuration of the {@link Ext.Audio} component to true by default,
  44  * and then control the audio by using the {@link #method-play}, {@link #method-pause}, and {@link #toggle} methods:
  45  *
  46  *     @example preview
  47  *     Ext.create('Ext.Container', {
  48  *         fullscreen: true,
  49  *         layout: {
  50  *             type: 'vbox',
  51  *             pack: 'center'
  52  *         },
  53  *         items: [
  54  *             {
  55  *                 xtype : 'toolbar',
  56  *                 docked: 'top',
  57  *                 title : 'Ext.Audio'
  58  *             },
  59  *             {
  60  *                 xtype: 'toolbar',
  61  *                 docked: 'bottom',
  62  *                 defaults: {
  63  *                     xtype: 'button',
  64  *                     handler: function() {
  65  *                         var container = this.getParent().getParent(),
  66  *                             // use ComponentQuery to get the audio component (using its xtype)
  67  *                             audio = container.down('audio');
  68  *
  69  *                         audio.toggle();
  70  *                         this.setText(audio.isPlaying() ? 'Pause' : 'Play');
  71  *                     }
  72  *                 },
  73  *                 items: [
  74  *                     { text: 'Play', flex: 1 }
  75  *                 ]
  76  *             },
  77  *             {
  78  *                 html: 'Hidden audio!',
  79  *                 styleHtmlContent: true
  80  *             },
  81  *             {
  82  *                 xtype : 'audio',
  83  *                 hidden: true,
  84  *                 url   : 'touch-build/examples/audio/crash.mp3'
  85  *             }
  86  *         ]
  87  *     });
  88  */
  89 Ext.define('Ext.Audio', {
  90     extend: 'Ext.Media',
  91     xtype : 'audio',
  92
  93     config: {
  94         /**
  95          * @cfg
  96          * @inheritdoc
  97          */
  98         cls: Ext.baseCSSPrefix + 'audio'
  99
 100         /**
 101          * @cfg {String} url
 102          * The location of the audio to play.
 103          *
 104          * ### Recommended file types are:
 105          * * Uncompressed WAV and AIF audio
 106          * * MP3 audio
 107          * * AAC-LC
 108          * * HE-AAC audio
 109          * @accessor
 110          */
 111     },
 112
 113     // @private
 114     onActivate: function() {
 115         var me = this;
 116
 117         me.callParent();
 118
 119         if (Ext.os.is.Phone) {
 120             me.element.show();
 121         }
 122     },
 123
 124     // @private
 125     onDeactivate: function() {
 126         var me = this;
 127
 128         me.callParent();
 129
 130         if (Ext.os.is.Phone) {
 131             me.element.hide();
 132         }
 133     },
 134
 135     template: [{
 136         reference: 'media',
 137         preload: 'auto',
 138         tag: 'audio',
 139         cls: Ext.baseCSSPrefix + 'component'
 140     }]
 141 });