Audio Element
The Audio Element adds an audio player to the page. Upload an audio file, such as a podcast episode, an interview or a music sample, and visitors can play it directly on the page with play, pause, progress and volume controls.
The player uses the audio player built into WordPress, so it works in all current browsers. You can style its background, progress bar, border and shadow, limit its width and align it, and add playback speed controls for spoken content.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Audio Element
Add the Audio Element to any column and choose or upload a file in the Audio field. Playback Speed Controls add a speed selector to the player, Loop starts the file again when it ends, and Autoplay tries to start playback when the page loads.
Preload decides how much of the file the browser loads with the page. None (the default) loads nothing until the visitor presses play, Metadata loads only details such as the duration, and Auto loads the whole file.
On the Design tab set the Background Color and the Audio Progress Color. If you choose a light background, switch Controls Color Scheme to Dark so the buttons stay visible, and the other way round. Maximum Width and Alignment control the size and position of the player; border, radius and box shadow options finish the look.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Audio. Change them there to style every Audio at once.
General
| Heading | Description |
|---|---|
| Audio | Upload an audio file. |
| Playback Speed Controls | Turn on to display playback speed controls. |
| Loop | Turn on to loop the media. |
| Autoplay | Turn on to autoplay the media. |
| Preload | Specifies if and how the audio should be loaded when the page loads. 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. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Background Color | Controls the background color for the audio player. |
| Controls Color Scheme | 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 using any valid CSS value. |
| Alignment | Select the alignment of the audio element. |
| Border Size | Set the border size. In pixels. |
| Border Color | Controls the border color for the audio player. |
| Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Box Shadow | Set to “Yes” to enable box shadows. |
| 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 | Controls the color of the box shadow. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Keep Preload on None or Metadata. Auto downloads the whole file for every visitor, even for those who never press play.
- Most browsers block autoplay with sound until the visitor has interacted with the page, so do not rely on Autoplay to start the audio.
- Offer a transcript in a Text Block below the player for spoken content. It helps visitors who cannot listen, and search engines can read it.
- Use a compressed format such as MP3 and keep files small; large audio files slow down the page for visitors with a slow connection.
- Box Shadow Position, Box Shadow Blur Radius, Box Shadow Spread Radius and Box Shadow Color only apply when Box Shadow is set to Yes.