I've been trying to figure out how to reproduce Google Translate's "Listen" on my WordPress website:

I've tried using the built-in , but it comes up with a heavy-duty music player. I just want an icon to click on that plays the word. I don't need to have the code do the translation, nor to create the mp3. I have used / to do that, and have uploaded the mp3 file to my site.

I could not find a plugin to do the job, so I have tried to come up with a suitable combination of HTML (using the Block Editor HTML block, that contains the following code:

<button type="button" onclick="play_word(this)">
  <i class="fa-solid fa-volume-high"></i>
</button>
<audio src=".mp3"></audio>

and I have installed the WPCode plugin that allows me to add a JavaScript function:

function play_word(btn)
{
  let audio_element = btn.next('audio');
  audio_element.play();
}

but it doesn't work. I would appreciate any help/advice/etc. to get this to work. Or a suggestion of an easier approach - even a plugin!

You can find the page where I am trying to make this work at:

/

Thank you for any help you can provide!

Bryan

I've been trying to figure out how to reproduce Google Translate's "Listen" on my WordPress website:

I've tried using the built-in , but it comes up with a heavy-duty music player. I just want an icon to click on that plays the word. I don't need to have the code do the translation, nor to create the mp3. I have used https://soundoftext/ to do that, and have uploaded the mp3 file to my site.

I could not find a plugin to do the job, so I have tried to come up with a suitable combination of HTML (using the Block Editor HTML block, that contains the following code:

<button type="button" onclick="play_word(this)">
  <i class="fa-solid fa-volume-high"></i>
</button>
<audio src="https://bhiggs.x10hosting/japan/wp-content/uploads/2025/03/Konichiwa.mp3"></audio>

and I have installed the WPCode plugin that allows me to add a JavaScript function:

function play_word(btn)
{
  let audio_element = btn.next('audio');
  audio_element.play();
}

but it doesn't work. I would appreciate any help/advice/etc. to get this to work. Or a suggestion of an easier approach - even a plugin!

You can find the page where I am trying to make this work at:

https://bhiggs.x10hosting/japan/japanese-phrases/

Thank you for any help you can provide!

Bryan

• wordpress
• audio

• What does your error log say when you click the button? Are there any other errors that you see in console? – disinfor Commented Mar 20 at 14:33

2 Answers 2

btn.next() is not a function. You don't have to use an audio element, you can:

const audio = new Audio("https://bhiggs.x10hosting/japan/wp-content/uploads/2025/03/Konichiwa.mp3");
btn.addEventListener("click", () => {
  audio.play();
});

I figured out how to do it.

I removed WPCode, because I decided to try embedding the necessary JavaScript code in the page where I needed it.

I added the following code just above the table of words and their translations:

<script>
function play_word(btn) 
{
  const audio_element = btn.nextElementSibling;
  audio_element.play();
}
</script>

Wherever I needed a click-to-speak icon, I added the following HTML block:

<button type="button" onclick="play_word(this)">
  <i class="fa-solid fa-volume-high"></i>
</button>
<audio src="https://bhiggs.x10hosting/japan/wp-content/uploads/2025/03/Konichiwa.mp3"></audio>

with each one specifying the MP3 to play.

You can try it out at this page:

https://bhiggs.x10hosting/japan/japanese-phrases/