1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
    vitalaaron is on a distinguished road

      0  

    Default Answered: Creating a Carousel with background audio for the images

    Answered: Creating a Carousel with background audio for the images


    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.

  2. 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.

  3. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Answers
    148
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
    vitalaaron is on a distinguished road

      0  

    Default


    Thank you for the information - much appreciated.

  5. #4
    Sencha User
    Join Date
    Jan 2013
    Posts
    7
    Vote Rating
    0
    vitalaaron is on a distinguished road

      0  

    Default


    Hi again,

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

    Code:
    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):

    Code:
    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.

Thread Participants: 1

Tags for this Thread