HTML 5 Audio with Sencha ExtJS 4.2

ExtJS 4.2.0

I have the following code to create an audio player: this.getComponent('mainComponent').insert(0, Ext.create('Ext.form.Panel', { bodyPadding: 10, border: false , height:200, width:300,

items: [{ xtype: 'label', fieldLabel: 'Audio File', html:'<audio preload controls><source src="'+this.model.get('url')+'"type="audio/mpeg">Your browser does not support the audio tag.</audio>' }] })

)

The source is hosted externally. On my page, the progress bar does not move, the audio only plays once, then the progress bar jumps to some huge negative number. I can reset it by calling $('audio').load() onended, but the progress bar still doesn't move. Any one else have this issue and/or know how to solve it? I have tried several methods of adding the html to the ExtJS element and loading the audio. It seems like the file isn't being loaded. On normal refresh everything works fine (i'm assuming at that point the audio file is being loaded from the cache).

I didn't see any native Ext class for audio except in Sencha touch.