Audio Player

Stream music, podcasts, educational and promotional audio to your audience with ease

HubSpot Video

Resources:

Explore our Ad Gallery for examples of this format

In this article, you will learn:

How to Add the Audio Player Component

How to Configure the Audio Player Component

How to Add the Audio Player Component

  1. Choose the ad format and dimensions of the ad unit you wish to add the Audio Player component to.  For guidance on building specific formats, check out this article.
  2. From the left menu, select the components icon component,  Audio Player.

    Ad Builder - Components - Audio Player Menu
  3. Once the Audio Player component is added to the canvas, you can begin configuration using the right hand component configuration menu:

     

    KB-Audio-Player-Build

How to Configure the Audio Player Component Properties

The Audio Player component Build configuration options are explained below:

Tracks By default, the player will display one track. You can add additional tracks by clicking the plus sign (+) located in the top right corner of the build menu.
Enter Track Enter the URL of the audio file, or select an audio file from the asset manager by clicking the musical note icon.
Author (Optional) Enter the Author of the audio track.
Track Title (Optional) Enter the Track Title of the audio track.
Cover Art (Optional) Upload the Cover Art of the audio track.
Click URL Enter the Click URL of the destination, should the user click on the audio player Author, Track Title, or Cover Art.
Log Name (Optional) Append a unique label for the Audio Player, which will display in campaigns and reporting.
Autoplay

If selected, the track will autoplay if the browser settings allow. If an additional track is added to the component, and a user clicks the "Next" KB-Audio-Player-Next-Button button, the second track will autoplay automatically.

* Note - In most browsers, user interaction is required to play audio or video within an ad unit.

Sponsor (Optional) You may configure the Audio Player to show Sponsor-related information including the Name, an optional Click URL and a  Logo.

 

How to Modify the Design of the Audio Player

  1. Click the Design tab at the top of the Audio Player properties menu:

    KB-Audio-Player-Design

The Audio Player component Design configuration options are explained below:

Background Color Select the background color for the component. By default, the background color is set to black.
Color Select the text and button color for the component. By default, the color is set to white.
Show Playlist If selected, this will show a menu button KB-Audio-Player-Show-Playlist-Button on the bottom of the component, allowing the user to click and view the playlist.
Loop Playlist If selected, the playlist will loop automatically.
Show Next This is selected by default. If unselected, the "Next" KB-Audio-Player-Next-Button track button will disappear.
Show Previous This is selected by default. If unselected, the "Previous" KB-Audio-Player-Previous-Button track button will disappear.
Show Scrubber This is selected by default. If unselected, the scrubber/audio timeline display will disappear.

 

  1. To finalize any styling on the main canvas, you may add any additional creative assets, Hitboxes or additional components necessary to the overall design.
  2. Save and Preview KB-Animations-Eyeball your ad.