Audio Gallery

Click HERE for an interactive tutorial. Scroll to the bottom for animated steps.

Detailed Step-by-step Tutorial

Add Audio Gallery

  • Go to Media at the top of the screen.
  • Drag Audio Gallery widget to an area of the page where you'd like to add it to.


  • Double-click on Audio Gallery or highlight it and go to Settings pane > APP.

Create New Gallery

Existing audio gallery, if any has been previously created, can be selected from the dropdown list. If no audio gallery has been created:

  • Click Create New Gallery.
  • Enter a gallery name.
  • Click Save.

  • Click Upload Audio files.

  • Click Upload.


  • Audio Type: Choose the upload/embed method for audio file(s).
  • Audio Link: Depending on the selected audio type, provide audio url or upload an audio file.
  • Click Save.

Gallery Settings

  • Double-click on Audio Gallery or highlight it and go to Settings pane > APP.

Basic Settings

  • Gallery Name: Enter a name for the gallery.
  • Hide Playlist: Toggle ON to hide the playlist.
  • Show Full Screen Icon: Toggle ON to show full screen icon.
  • Auto Open Player in Popup: Toggle ON to open audio player in popup dialog automatically.
  • Auto Play: Toggle ON to start playing audio automatically.
  • Auto Load: Toggle ON to load content automatically.
  • Random Play: Toggle ON to shuffle the audio from the playlist.
  • Looping On: Toggle ON to loop the playlist.
  • Use Numbers in Playlist: Toggle ON to show track numbers in the playlist.
  • Sortable Playlist Items: Toggle ON to allow re-sort tracks in the playlist.
  • Use Remove Button in Tracks: Toggle ON to allow to remove tracks from the playlist.

Advanced Settings

  • Active Item: Set a number of active items.
  • Auto Update Window Data: Toggle ON to auto-update window data.
  • Default Volume: Set default playback volume.
  • Auto Set Song Title: Toggle ON to auto-set song title.
  • Use Volume Tooltip: Toggle ON to show volume tooltip.
  • Use Seekbar Tooltip: Toggle ON to show seeker tooltip.
  • Use Button Rollovers: Toggle ON to show button rollovers.
  • Use Alert Messaging: Toggle ON to show alert messages.
  • Activate Playlist Scroll: Toggle ON to activate playlist scrolling.
  • Playlist Scroll: Choose vertical or horizontal orientation for scrolling.
  • Auto Reuse Mail For Download: Reuse mail for track downloads.

  • Use Keyboard Navigation: Toggle ON to allow keyboard navigation.
  • Use Only MP3 Format: Toggle ON to allow only MP3s.
  • Soundcloud API key: Enter API for your SoundCloud account.
  • Soundcloud Result Limit: Set limit for the number of your SoundCloud tracks.
  • Podcast Result Limit: Set limit for the number of podcast tracks.
  • YouTube Playlist Result Limit: Set limit for the number of tracks in your YouTube playlist.
  • Ofm Result Limit: Set Ofm result limit.
  • Use Playlist Rollovers: Toggle ON to activate playlist rollovers.
  • Playlist Item Content: Choose to show title or thumb for the playlist items.
  • Use Song Name Scroll: Toggle ON to show song name scroll.
  • Scroll Speed: Set scroll speed.

General Settings

  • Title: Enter the title.
  • Show as Tooltip: Show the title as tooltip (text that appears when your mouse hovers over the audio gallery).
  • Top: Set top margin.
  • Left: Set left margin.
  • Width: Set the width.
  • Fixed Width: Toggle ON to fix audio gallery's width.


  • Color: Choose background color.
  • Opacity: Set opacity for the background.
  • Image: Enable to use an image as a background.
  • Size: Choose background size (i.e. auto, 100%, etc.).
  • Position: Set position of the background.
  • Repeat: Choose repeat type for the background.


  • Color: Choose border color.
  • Style: Chose border style.
  • Width: Choose the width of the border.
  • Radius: Choose border corner radius.

Box Shadow

  • Shadow: Toggle ON to create a shadow for the contact form.
  • H-Shadow: Set horizontal position of the shadow.
  • V-Shadow: Set vertical position of the shadow.
  • Blur: Set blur value for the shadow.
  • Spread: Define how far the shadow spreads.
  • Color: Set the color for the shadow.
  • Style: Select between inset and outset.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request