Clear Up
SharpKit Reference

Audio Class

Namespace: Ext

Base Types

System.Object

Constructors

Name Description
Audio(AudioConfig)
Audio()

Properties

Name Description
extend {@link Ext.Audio} is a simple class which provides a container for the [HTML5 Audio element](http://www.w3schools.com/html5/tag_audio.asp). ## 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 #play}, {@link #pause} and {@link #toggle} methods to control the audio (example below). ## Examples Here is an example of the {@link Ext.Audio} component in a fullscreen container: @example preview 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/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 #play}, {@link #pause} and {@link #toggle} methods: @example preview 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!', styleHtmlContent: true }, { xtype : 'audio', hidden: true, url : 'touch/examples/audio/crash.mp3' } ] }); *
xtype {@link Ext.Audio} is a simple class which provides a container for the [HTML5 Audio element](http://www.w3schools.com/html5/tag_audio.asp). ## 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 #play}, {@link #pause} and {@link #toggle} methods to control the audio (example below). ## Examples Here is an example of the {@link Ext.Audio} component in a fullscreen container: @example preview 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/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 #play}, {@link #pause} and {@link #toggle} methods: @example preview 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!', styleHtmlContent: true }, { xtype : 'audio', hidden: true, url : 'touch/examples/audio/crash.mp3' } ] }); *

Methods

© Copyright 2005-2011 SharpKit. All rights reserved.