0

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 enter image description here

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.

1

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.