How to create a simple audio button for MP3 playback in WordPress without full player controls

Other Questions Wordpress
1

I want to add a simple click-to-play audio feature on my WordPress site. Think of it like a pronunciation button that just plays an audio file when clicked.

I don’t want the default WordPress audio player because it shows too many controls. I just need a basic icon that plays the sound file when someone clicks it.

I already have the MP3 files ready and uploaded to my site. I tried creating a custom solution using HTML and JavaScript but ran into issues.

Here’s what I attempted:

<div class="audio-player">
  <button onclick="playSound(this)">
    <i class="fas fa-play"></i>
  </button>
  <audio src="/path/to/my-audio-file.mp3"></audio>
</div>

And the JavaScript function:

function playSound(button) {
  let soundFile = button.nextElementSibling;
  soundFile.play();
}

The button appears but clicking it doesn’t trigger the audio playback. I’m using a code snippets plugin to add the JavaScript.

Is there a better way to do this? Maybe a lightweight plugin or a different approach that actually works? I just need something simple that plays audio on click without showing player controls.

2

Your JavaScript approach is actually solid, but the issue is likely that WordPress isn’t loading your custom script properly or there’s a conflict with how you’re implementing it. I had the exact same problem when building pronunciation buttons for a language learning site. Instead of using a code snippets plugin, try adding your JavaScript directly to your theme’s functions.php file using wp_enqueue_script. This ensures proper loading order. Also, wrap your function in a document ready event to make sure the DOM is fully loaded before the script runs. Another thing to check - modern browsers often block autoplay audio without user interaction. Make sure you’re testing this properly by actually clicking the button rather than trying to trigger it programmatically during page load. If you’re still having issues, consider using the HTML5 audio API more explicitly. Sometimes calling load() before play() helps with certain browsers and hosting configurations.

3

The problem might be browser security restrictions blocking audio playback. Most modern browsers require explicit user interaction before playing audio files. Your code structure looks correct, but you need to handle potential promise rejections from the play() method. Try modifying your function like this: function playSound(button) { let soundFile = button.nextElementSibling; soundFile.play().catch(e => console.log('Audio play failed:', e)); }. Also check your browser’s console for any error messages when clicking the button. Another common issue is incorrect file paths - make sure your MP3 files are actually accessible by testing the direct URL in your browser. If you’re still having trouble, consider using a simple plugin like Easy Audio Player or Custom Audio Player which handles these browser compatibility issues automatically while still giving you minimal controls.

4

had similar issue last month - try wrapping your js in jquery ready function and use $(this).siblings(‘audio’)[0].play() instead. also check if your theme has any js conflicts by testing in default theme first. works fine for me now