Creating a Carousel with background audio for the images

[vitalaaron]

Hi,

Can a Carousel object contain both image and audio files in the same item (perhaps combined in a Container)? I would like to show the image and play the audio file in the background. If not, is there a preferred method for accomplishing this?

Thanks.

[AndreaCammarata]

Yes, you can.
Both are components so what you need to is just to set the container layout to "fit" and place the image as item, and the audio component as docked item.
Otherwise set the layout type to 'vbox' and both the components as items.
Is totally up to you.

[vitalaaron]

Thank you for the information - much appreciated.

[vitalaaron]

Hi again,

This works fine (plus the audio element overlaps the photo, which is what I want) :

Ext.application({
    launch: function () {
      
      var image_1 = {
        xtype: 'image',
        src: 'http://path/to/my/image.jpg'
      };
      
      var audio_1 = {
        xtype: 'audio',
        url: 'http://path/to/my/audio.mp3',
        autoPause: true
      };
      
      Ext.create('Ext.Container', {
        fullscreen: true,
        layout: 'fit',
        items: [image_1, audio_1]
      });
    }
});

while using the same container as a carousel item renders nothing other than the dots at the bottom of the page (no visible image or audio elements):

Ext.application({
    launch: function () {
      
      var image_1 = {
        xtype: 'image',
        src: 'http://path/to/my/image1.jpg'
      };
      var image_2 = {
        xtype: 'image',
        src: 'http://path/to/my/image2.jpg'
      };
      
      var audio_1 = {
        xtype: 'audio',
        url: 'http://path/to/my/audio1.mp3',
        autoPause: true
      };
      var audio_2 = {
        xtype: 'audio',
        url: 'http://path/to/my/audio2.mp3',
        autoPause: true
      };
      
      Ext.create('Ext.Carousel', {
          fullscreen: true,
          items: [
            Ext.create('Ext.Container', {
              fullscreen: true,
              layout: 'fit',
              items: [image_1, audio_1]
            }),
            Ext.create('Ext.Container', {
              fullscreen: true,
              layout: 'fit',
              items: [image_2, audio_2]
            })
          ],
      });


    }
});

Any idea what I am doing wrong in the second example?

Thanks.