Audio Playlist

Audio Playlist is the perfect widget for those looking to feature multiple audio files in a single playlist. The playlist format is great for artists, churches, podcasters and more.
With the same controls and settings found in much larger and complexly-integrated offerings, our Audio Playlist widget makes it easy to add a highly customizable, full-featured audio player to your site. This audio player works with self-hosted audio as well as web-based files.

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget onto your page, placing it where you would like the audio player to appear.
  • Open the widget option panel.
  • Unique ID: If you plan to use multiple Audio Playlist widgets on the same page, make sure to use unique IDs for each widget.
  • Layout: There are four different layouts:
    • Compact: this layout is narrow in height, and can be used in medium-wide widths.

    • Simple: This is the smallest and simplest layout. It displays basic playback buttons and a scrub tool to control the playback location within the song. Note that while this layout does not display a playlist, the user can still play all the songs in your playlist (they can be accessed with the previous and advance buttons).

    • Wide: This layout displays all playlist features in a wide layout. This is useful for full width applications.

    • Standard: This layout is displayed vertically, and is useful when displayed in a column.

  • When selecting a layout, it is important to keep the intended width and height settings in mind. The widget width and height should be adjusted per layout, as the widget does not resize automatically when switching between layouts. Use the references above as examples of appropriate sizing for specific layouts.
  • Go to Design > Widget Dimensions > Width and Height to adjust widget size. These should be adjusted individually for each layout.

ADDING AUDIO FILES

Each List Item allows you to enter individual audio tracks, artwork and more.

  • Click the first List Item under Audio Track Setup.
  • There are two ways to add songs to the player. Local and External Link.
    • Adding Local Files:
      • Select Local as Audio Source.
      • Click Local File (.mp3), and scroll down to the File for download option. Select this option.
      • Click “+ File”
      • On the new screen that appears, you can select an mp3 you’ve previously uploaded, or upload a new one.
      • Select the file you wish to use.
    • Using External Links:
      • Select External Link as Audio Source.
      • Enter the URL of your audio file. Keep in mind that the URL should be a direct link to the audio file. This usually means that the URL must end in “…mp3”
  • Cover Image File: Click the +Image box to add an image. You may upload a new image or choose an image in the stock image library. Note: Image sizing is important. See the tips section for more information.
  • Audio Title: This is the title text of the track.
  • Audio Subtitle: This is the subtitle text of the track and is displayed below the title.
  • Audio Info URL: This is the link for the track.
  • Click “Add Audio Item” to add additional tracks to the playlist.

ADDITIONAL SETTINGS

  • Skin Style: you may choose a dark or light skin. This allows you to better match the general style of your site.
  • Cover Image Fitting Style: This allows you to choose an Adaptive or Fixed format for the cover image of the tracks. Adaptive displays each cover image in its original shape (aspect ratio), while the Fixed setting displays all cover images in a fixed shape. We suggest using the Fixed setting here. See the tips section for more info.
  • Info Text Settings: This section contains three additional options:
  • Show Info URL: This displays the link text (the link still functions when this is turned off)
  • Button Label: This is the text that is displayed on the button.
  • Button Link Target: This determines whether the link opens in the same window or a new window.
  • Playlist Cover Max Width: Use these settings to control the size of the cover image.
  • Playlist Cover Max Height: Use these settings to control the size of the cover image.
  • “Show” Toggles: There are several toggle options in the bottom of the Content section that show or hide various features of the playlist. They include: cover image, background image, repeat button, shuffle button, previous button, next button and download button.

DESIGN SETTINGS

  • Width/Height: As mentioned in the Widget Placement and Sizing section, the width and height settings should be used in combination with the layout styles (standard, compact, wide and simple).It is generally best to choose a layout, then adjust the width and height of the widget to work best with the selected layout. Keep in mind that the cover image size (Playlist Cover Max Width/Height settings) can be adjusted, as well as Playlist Height. These settings can also impact the size and appearance of the playlist.
  • Playlist Height: This sets the height of the playlist (the list of tracks). If your playlist has an extensive number of songs, you may need to set the playlist height to fit with the general sizing of the widget. A scrollbar will be seen when the number of tracks exceeds the height set for the playlist.
  • Main Accent Color: This sets the color for various elements of the playlist, such as the active track and the loop button.
  • Player Background Styling: The playlist background contains a few elements – a background image, and an overlay over that image. This section contains 3 settings:
  • Background Color Opacity: This sets the opacity of the color overlay seen above the background image.
  • Background Image Opacity: This sets the opacity for the background image. Note that the background image is the same as the track cover image.
  • Background Image Blur Value: The background image may be blurred to lesser or greater degrees. Increasing blur value can allow the user to better focus on the text and button details.
  • Player Text Styling Section: This section contains all of the styling for the text throughout the widget. The settings in this section are labeled with their exact function.

TIPS

  • Choose the layout that best fits the space available on your page. Some layouts are better used horizontally in a row, while others are better used vertically in a column.
  • Use the Height and Width settings in the Widget Dimensions settings to adjust the widget size. Do not use the blue grab handle to resize the widget. Use these settings in combination with the layouts to achieve the proper shape.
  • Remember that the Playlist Height and Playlist Cover Max Width and Height can be fine tuned to adjust the size and shape elements within the layout.
  • Cover Image Fitting Style: This is an important setting. As mentioned in the settings above, we suggest using the Fixed setting here. When set to Adaptive, the widget passes along the original shape (aspect ratio) of the image, which can cause the entire widget to change shape as the use advances through the playlist. This can result in a jarring effect if the cover images use different dimensions. It’s for this reason that we suggest either preparing all cover images by cropping them to the same dimensions or by using the Fixed setting.