Audio Element

09/10/2019

The Audio Element is brand new in Avada 6.1, and offers the ability for users to post self-hosted audio clips easily and stylishly to their Avada websites.

View Element Demo Page!

How To Use The Audio Element

The Audio Element is easy to add anywhere in your content. Follow these simple steps below.

Step 1. Edit an existing page. Ensure the Fusion Builder is activated, by clicking the ‘Use Fusion Builder’ button on top of the page editor.

Step 2. Choose the Container and Column you wish to add the Alert Element into. Click on Add new Element.

Step 3. Choose Audio from the Elements List.

Step 4. Add your audio file in the first option, Audio. You can either select one already in the media library, or upload one. This element uses a HTML5 tag, and so supports all major audio formats, inlcuding .mp3, .wav, & .m4a.

Step 5. Once you have added your audio file, continue configuring the element with your preferred styling options. This element can also be styled in conjunction with the containing column.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Audio section.

General Tab

  • Audio – Upload or select your audio file to be loaded into the player.

  • Loop – Turn on to loop the media when it is played.

  • Autoplay – Turn on to autoplay the media upon page load.

  • Preload – This setting specifies if and how the audio should be loaded when the page loads. It defaults to “None”.
    • “None”: The audio should not be loaded when the page loads.
    • “Auto”: The audio should be loaded entirely when the page loads.
    • “Metadata”: Only metadata should be loaded when the page loads.

View The Options Screen

Design Tab

  • Background Color – Controls the background color of the audio player.

  • Controls Color Scheme – This setting sets the color of the controls of the player. Depending on the background color you can change this value to “Light” or “Dark” to ensure controls are visible.

  • Audio Progress Color – Select a color for the audio progress-bar.

  • Maximum Width – Set the maximum width of the audio player using a valid CSS value.

  • Border Size – Set the border size. In pixels.

  • Border Color – Set the border color.

  • Border Radius – Set the border radius. In pixels.

  • Box Shadow – Set to Yes to enable a box shadow for the element.

  • Box Shadow Position – Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px.

  • Box Shadow Blur Radius – Set the blur radius of the box shadow. In pixels.

  • Box Shadow Spread Radius – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.

  • Box Shadow Color – Set the color of the Box Shadow.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Audio

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Maximum Width – Set the maximum width of the audio player using a valid CSS value.

  • Background Color – Controls the background color of the audio player.

  • Audio Progress Color – Select a color for the audio progress-bar.

  • Controls Color Scheme – This setting sets the color of the controls of the player. Depending on the background color you can change this value to “Light” or “Dark” to ensure controls are visible.

  • Border Size – Set the border size. In pixels.

  • Border Color – Set the border color.

  • Border Radius – Set the border radius. In pixels.

View The Options Screen

Audio Element Parameters

Copy to Clipboard
  • src – The source of the audio file to load in the player.

  • loop – yes or no. Loops the audio.

  • autoplay – yes or no. Autoplays the audio on page load.

  • preload – no, auto or metadata. Controls what preloads with the page.

  • background_color – Accept a hexcode ( #000000 ). Sets the background color.
  • controls_color_scheme – Sets the color scheme for the player controls. Options are dark or light.

  • progress_color – Sets the color for the progress bar in the player. Takes a hex code (#ffffff)

  • max_width – Sets the maximum width for the audio player. Accepts any valid CSS value.

  • border_size – Accepts a pixel value. For example, 1px. Sets border width.
  • border_color – Controls the color of the border – takes a hex code (#ffffff).

  • border_radius – Controls the radius of the border. In pixels.

  • box_shadow – Enable a box shadow on the audio player. Accepts yes or no.

  • box_shadow_vertical – Set the vertical position of the box shadow. Positive values put the shadow below the box, negative values put it above the box. In pixels.

  • box_shadow_horizontal – Set the horizontal position of the box shadow. Positive values put the shadow to the right of the box, negative values put it to the left of the box. In pixels.

  • box_shadow_blur – Set the blur radius of the box shadow. In pixels.

  • box_shadow_spread – Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels.

  • box_shadow_color – Set the color of the Box Shadow. Takes a hex value (#ffffff)