Sencha Touch Audio in Carousel - extjs

Question

I would like to have a small mp3 played every time a new panel is shown in the carousel. I used the audio xtype with autoplay but this results in an cacophony of sounds on startup. The problem occurs on all devices (simulators, Chrome, ipad and nexus7). Now, I use a button that activates the sound but I would like it to autoplay when it is needed (on active panel). It "sounds" so simple but I can't get it to work. Any help is appreciated.
This is one carousel item (with a button):
{
layout: {
type: 'vbox',
align: 'stretch',
},
items: [
{
flex:4,
xtype: 'image',
src: 'resources/images/hond.png',
},
{
xtype: 'button',
text: 'Play',
iconCls: 'arrow_right',
cls: 'knopsound',
handler: function() {
Ext.getCmp('hond').toggle();
this.setText(Ext.getCmp('hond').isPlaying() ? 'Pause' : 'Play');
}
},
{
xtype: 'audio',
url: 'resources/images/hond.mp3',
id: 'hond',
loop: false,
enableControls: false,
hidden:true
},
{
flex:3,
xtype: 'video',
url: 'resources/images/test.mp4',
posterUrl: 'resources/images/bekijkgebaar.png',
cls: 'videoplayknop',
autoResume: true,
autoPause: true,
enableControls: false,
}]},

Answer 1

You should leverage the activeitemchange(carousel, newItem, oldItem) event on the carousel to play the sound.
I would just store the url of the sound to play in a custom property of the panel. To do that you could extend Ext.Panel and add a custom property in configuration so you'd get getters and setters for that property. Or you could just have an array of sound urls and call the carousel's getActiveIndex() to play the right sound.
Once you got the url you would play it using a dummy hidden component:
Something like:
document.getElementById("dummy").innerHTML=
'<embed src="' + soundurl + '" hidden="true" autostart="true" loop="false" />';
Or if you are developing a native app using Cordova:
var media = new Media(url, onSuccess, onFailure);
media.play({ playAudioWhenScreenIsLocked : false });