---
title: "Audio Player Field - Advanced Custom Fields"
description: "Embed audio files with a sleek HTML5 audio player. Perfect for podcasts, music tracks, and more!"
url: "https://www.tassos.gr/docs/advanced-custom-fields/fields/audio-player"
date: "2026-04-30T16:19:13+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Advanced Custom Fields ](https://www.tassos.gr/index.php?option=com_content&view=category&id=44) / [ Fields Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=64)

#  Audio Player Field

##  Embed audio files with a sleek HTML5 audio player. Perfect for podcasts, music tracks, and more!

The HTML5 Audio custom field gives you the ability to display an HTML5 Audio at your frontend just by filling out the URL or the relative path of the audio file.[](#how_to_add_a_html5_audio_custom_field_to_joomla_articles)

## [How to add a HTML5 Audio Custom Field to Joomla! Articles](#how_to_add_a_html5_audio_custom_field_to_joomla_articles)

The HTML5 Audio field provides you all of the customization options of the HTML5 Audio Specification.

![acf-html5-audio-field-settings](https://www.tassos.gr/images/acf-html5-audio-field-settings.png)

As you can see from the screenshot above, after choosing the correct Type, you can customize your player however you'd like.

Let's see what each option does.

 | Name | Description |
|---|---|
| Name | The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title. |
| Label | The label of the field to display. |
| Description | A description of the field that will be displayed in the label tooltip. |
| Required | Is this a mandatory field? |
| Auto Play | Specifies that the media file will start playing as soon as it is ready |
| Controls | Specifies that player controls should be displayed (such as a play/pause button etc). |
| Loop | Specifies that the player will start over again, every time it is finished |
| Muted | Specifies that the audio output of the audio should be muted |
| Preload | Specifies if and how the audio should be loaded when the page loads |

## [Usage](#usage)

Once you are in your Article's Edit screen, choose the "Fields" Tab to see the HTML5 Audio custom field as you can see in the screenshot below.

![acf-html5-audio-usage](https://www.tassos.gr/images/acf-html5-audio-usage.png)

In this textbox you can type in the full URL or the relative local path of the Audio file.

## [Frontend Display](#frontend)

Take a look at the screenshot below to see how it could be displayed in your frontend.

![acf-html5-audio-frontend](https://www.tassos.gr/images/acf-html5-audio-frontend.png)

## [Frequently Asked Questions](#faq)

### [How can I override the layout of "ACF - HTML5 Audio" custom field?](#how-can-i-override-the-layout-of-acf-html5-audio-custom-field)

To override the "ACF - HTML5 Audio" custom field, read here: [How to override the "ACF - HTML5 Audio" custom field](https://www.tassos.gr/joomla-extensions/advanced-custom-fields/docs/how-to-create-an-alternative-layout-for-joomla-custom-fields#override_render_layout).

 Last updated on Oct 29th 2025 14:10

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Advanced Custom Fields",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Fields Types",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields/fields"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Audio Player",
            "item": "https://www.tassos.gr/docs/advanced-custom-fields/fields/audio-player"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/advanced-custom-fields/fields/audio-player"
    },
    "headline": "Audio Player",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Sotiris Katsaniotis",
        "url": "https://www.tassos.gr/docs/advanced-custom-fields/fields/audio-player"
    },
    "datePublished": "2017-11-11T11:11:40+02:00",
    "dateCreated": "2017-11-11T11:11:40+02:00",
    "dateModified": "2025-10-29T14:50:10+02:00"
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "How can I override the layout of "ACF - HTML5 Audio" custom field?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "To override the "ACF - HTML5 Audio" custom field, read here: How to override the "ACF - HTML5 Audio" custom field."
            }
        }
    ]
}
```