Sencha Touch audio handling works fine on desktop browser, works randomly on mobile browser

Sencha Touch audio handling works fine on desktop browser, works randomly
on mobile browser

I am building an application that uses the Sencha Touch carousel and each
item in the carousel is a container. Each container has an image, an audio
file and a button to pause / play the audio file. I found some good sample
code for handling the audio play/pause behavior with a button (really I
would like the image to handle the play/pause if you could help me figure
that out that would be even better than a button!) but it does not seem to
want to work on my iPhone or iPad. I've even tried the Chrome browser to
see if it is just Safari but maybe it is just the way mobile devices
handle a large request for audio files. I have about 30 m4a files that are
between 30 - 60 seconds in length so it's not that crazy of a request I
feel like.
Here is my carousel code (and the first item) with the handler built-in:
Ext.define('MyApp.view.BrocadeGuide', {
extend: 'Ext.carousel.Carousel',
alias: 'widget.brocadeguide',
config: {
items: [
{
xtype: 'container',
items: [
{
xtype: 'audio',
hidden: true,
autoPause: false,
enableControls: true,
url: 'http://pureispoor.com/ninja/audio/Deer.m4a'
},
{
xtype: 'button',
handler: function(button, event) {
var container = this.getParent(),
// use ComponentQuery to get the audio component
(using its xtype)
audio = container.down('audio');
audio.toggle();
this.setText(audio.isPlaying() ? 'Pause' : 'Play');
},
margin: '0 5% 0 5%',
padding: '15 0 15 0',
top: '35px',
ui: 'confirm-round',
width: '90%',
text: 'Play'
},
{
xtype: 'image',
height: '100%',
itemId: 'myimg21',
src: 'http://pureispoor.com/ninja/photos/Deer.jpg'
}
]
},
Any ideas on what might be causing mobile devices the trouble? I am trying
to debug so I have the audio controls un-hidden for the first five in my
list if you want to see my app live: Immortal Ninja