How to display the audio player in the article excerpt?

The WP auto-excerpt function strips out all HTML tags so it can get an accurate word count. Thus you cannot expect audio player embed code to survive the process. If you use the post’s excerpt field, any HTML tags and embed code will be retained. The excerpt field, when populated, will automatically be used instead of the word count auto-excerpt. Of course the drawback is the field will need to be manually defined for every post.

Or you could maintain the embed code, or at least the audio file’s source URL, in a custom field for each post. Then modify the archive template being used to output this custom field in addition to the usual auto-excerpt of post content. This way you don’t need to manually define the entire excerpt, you just need to provide appropriate data in the custom field.

Hello @gwenm,

The Stack Overflow link you mentioned is referring to the famous WordPress Loop, which is used to display posts on any page, including the homepage. If you want to add the audio player feature to the excerpt on the homepage, you’ll need to find the loop in your theme’s template files.

The loop can typically be found in one of the following files in your theme’s folder:

• home.php: This file is often used to display the blog posts on the homepage.
• index.php: If your theme doesn’t have a home.php file, then the index.php file will be used as the fallback for displaying posts.

You can customize it to include the audio player in the excerpt. Let me know if you need any further help!

@bcworkz , thank you for your help,
To do this I would need to use a plugin like ACF for custom fields? I managed to integrate my audio as I wished, but can you tell me more about this method?

@sppramodh , thanks for your help, I found the loop in loop.php and was able to integrate the script as required. Now I have a podcast site that looks like a podcast site! Thanks for all your help ??

I’m glad you found a solution. FYI, you don’t necessarily need a plugin to utilize custom fields, there’s a built in UI for it. You might have yours hidden. It can be made visible in the editor’s preferences or screen options. Assuming you use either the block (Gutenberg) or classic editors.

IMO, the default UI for custom fields is rather clunky. For a nicer user experience you might be happier using a plugin such as ACF, but it’s not absolutely necessary.

@bcworkz I’m not familiar with custom fields because I’ve never used them much. I can’t figure out how to use them to display audio in excerpts. Do you have a link so that I can understand? Thanks for any help^^

Hello @gwenm ,

To display audio in the excerpt on your homepage, you can use the the_excerpt filter to add the audio shortcode dynamically. Here’s how you can customize it in your theme’s functions.php:
function add_audio_to_excerpt( $excerpt ) {
// Add your audio shortcode before or after the excerpt content
$audio = ‘[audio src="your-audio-file.mp3"]‘;
return $audio . $excerpt; // This will prepend the audio to the excerpt
}
add_filter(‘the_excerpt’, ‘add_audio_to_excerpt’);

Replace “your-audio-file.mp3” with the URL of your audio file. This will display the audio player in the excerpt on the homepage. If you want to manage different audio files per post, you could add custom fields for the audio URL and dynamically output it.

Hello @dilip2615 , I’ll take all the tips. Thanks for the advice ??

Welcome @gwenm ,

if you need more suggestions, related to any issue please let me know.
I am also available on Slack.

@dilip2615 thank you ??

If you use Dilip’s exact suggestion, the same audio file would used in the appended player for all posts. But if the audio file were added as a custom field, you can modify their suggested code to get the file’s path from post meta (where custom fields are saved). Then each post will have its own audio file in the player.

I’ll assume you are able to see the custom fields dialog below the main editor field. Under “Add New Custom Field:”, click the “Add new” button and assign a good name for your custom field. It’s best to use a name following post slug name rules: all lower case, no special or accented chars except for -. Maybe audio-file-path? Once you’ve added a name one time, with other posts you can select the same name from the drop down field. It’s important that all posts use the same name for the same use. In the Value field enter the file’s relative path for the current post. Click the “Add custom field” button.

The file’s path must be relative to the same base URL for all audio files. The base URL would be defined by how you modify Dilip’s code. The file’s full path needs to be passed to the [audio] shortcode. You could do something like this:
$audio = ‘[audio src="'. content_url('/uploads/audio/'. get_post_meta( get_the_ID(), 'audio-file-path', true )) ."]‘; (untested)

You might consider first checking if the audio custom field value exists. If not, don’t output the audio player at all.

If the suggested excerpt filter code fails to expand the shrotcode into an audio player, you probably need to either add a small $priority arg to the add_filter() call, or explicitly pass $audio through do_shortcode()

Thanks @bcworkz for your insights, I’d never have thought of using custom fields to make my audio files appear elsewhere than in articles. You are a precious help ?? .