Adding simple (one button) Audio player using Custom Fields?

Question

Adding simple (one button) Audio player using Custom Fields?

startToday

2021年12月12日 22:11

Could you please help me finding a way to adding a simple audio player to my posts using Custom Fields. The player will only have Play functionality and nothing more needed.

The use case is in some Learning website which publish new vocabularies and each vocabulary should have Pronunciation. The final result would be something like this image

Now, I worked with Custom Fields and I know how to get back custom field values. The problem is I don't know how I can show that in this simple context for audio playing.

Thanks in advance.

Topic audio custom-field Wordpress

Category Web

ppajer · Accepted Answer · 2016年11月1日 20:59

At the most basic, your page will need to have a hidden <audio> element and some javascript to trigger the playback.

You can simply add the URL of the audio file for each post to your custom field, then call get_post_meta() in your template to bind it to the player. Then on the frontend you can bind a click handler to your button that plays the pre-defined audio element.

The custom field (named audioURL in this example)

http://absolute.url/to/audio/file.mp3

In your template file

<audio id="audioPlayer" src="<?php get_post_meta(get_the_ID(), 'audioURL', true); ?>" preload="auto">

The JavaScript

// Vanilla JS
document.getElementById('yourButtonID').onclick = function() {
    document.getElementById('audioPlayer').play();
}

// Or if you're using jQuery
$('#yourButtonID').on('click', function() {
    $('#audioPlayer')[0].play();
})

Hope this helps!

Adding simple (one button) Audio player using Custom Fields?

The custom field (named audioURL in this example)

In your template file

The JavaScript

About