/**
 * {@link Ext.Audio} is a simple class which provides a container for the
 * [HTML5 Audio element](http://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video).
 *
 * ## Recommended File Types/Compression:
 *
 * * Uncompressed WAV and AIF audio
 * * MP3 audio
 * * AAC-LC
 * * HE-AAC audio
 *
 * ## Notes
 *
 * On Android devices, the audio tags controls do not show. You must use the {@link #method-play},
 * {@link #method-pause}, and {@link #toggle} methods to control the audio (example below).
 *
 * ## Examples
 *
 * This example shows the use of the {@link Ext.Audio} component in a fullscreen container--change
 * the url: item for the location of an audio file--note that the audio starts on page load:
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 * Ext.create('Ext.Container', {
 *     fullscreen: true,
 *     layout: {
 *         type : 'vbox',
 *         pack : 'center',
 *         align: 'stretch'
 *     },
 *     items: [
 *         {
 *             xtype : 'toolbar',
 *             docked: 'top',
 *             title : 'Ext.Audio'
 *         },
 *         {
 *             xtype: 'audio',
 *             url  : 'touch-build/examples/audio/crash.mp3'
 *         }
 *     ]
 * });
 * ```
 *
 * You can also set the {@link #hidden} configuration of the {@link Ext.Audio} component to true
 * by default, and then control the audio by using the {@link #method-play}, {@link #method-pause},
 * and {@link #toggle} methods:
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 * Ext.create('Ext.Container', {
 *     fullscreen: true,
 *     layout: {
 *         type: 'vbox',
 *         pack: 'center'
 *     },
 *     items: [
 *         {
 *             xtype : 'toolbar',
 *             docked: 'top',
 *             title : 'Ext.Audio'
 *         },
 *         {
 *             xtype: 'toolbar',
 *             docked: 'bottom',
 *             defaults: {
 *                 xtype: 'button',
 *                 handler: function() {
 *                     var container = this.getParent().getParent(),
 *                         // use ComponentQuery to get the audio component (using its xtype)
 *                         audio = container.down('audio');
 *
 *                     audio.toggle();
 *                     this.setText(audio.isPlaying() ? 'Pause' : 'Play');
 *                 }
 *             },
 *             items: [
 *                 { text: 'Play', flex: 1 }
 *             ]
 *         },
 *         {
 *             html: 'Hidden audio!'
 *         },
 *         {
 *             xtype : 'audio',
 *             hidden: true,
 *             url   : 'touch-build/examples/audio/crash.mp3'
 *         }
 *     ]
 * });
 * ```
 */
Ext.define('Ext.Audio', {
    extend: 'Ext.Media',
    xtype: 'audio',
 
    config: {
        /**
         * @cfg cls
         * @inheritdoc
         */
        cls: Ext.baseCSSPrefix + 'audio'
 
        /**
         * @cfg {String} url
         * The location of the audio to play.
         *
         * ### Recommended file types are:
         * * Uncompressed WAV and AIF audio
         * * MP3 audio
         * * AAC-LC
         * * HE-AAC audio
         * @accessor
         */
    },
 
    /**
     * @private
     */
    onActivate: function() {
        var me = this;
 
        me.callParent();
 
        if (Ext.os.is.Phone) {
            me.element.show();
        }
    },
 
    /**
     * @private
     */
    onDeactivate: function() {
        var me = this;
 
        me.callParent();
 
        if (Ext.os.is.Phone) {
            me.element.hide();
        }
    },
 
    template: [{
        reference: 'media',
        preload: 'auto',
        tag: 'audio',
        cls: Ext.baseCSSPrefix + 'component'
    }
    ]
});