WordPress仿谷歌翻译一键播放MP3功能实现求助

我想在WordPress网站上做一个类似谷歌翻译的「Listen」点击播放功能——只需要一个点击就能播放单词/短语音频的图标，不需要复杂的音乐播放器功能。已经生成好MP3文件并上传到网站，不需要翻译或生成音频的功能。

试过的方法及问题 #

• 用过WordPress内置播放器，但功能太重，完全不符合需求
• 没找到合适的插件，于是自己尝试用HTML区块+WPCode插件添加JS的方案，但无法正常工作：
  1. HTML区块代码：

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

  2. WPCode添加的JS函数：

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

解决建议 #

一、修复现有代码方案 #

问题出在JS的写法上：btn.next('audio')是jQuery语法，若网站没加载jQuery或写法不对就会失效，改成原生JS即可：

1. 更新WPCode里的JS函数：

function play_word(btn) {
  // 原生JS获取相邻的下一个兄弟元素（audio标签）
  let audio_element = btn.nextElementSibling;
  if (audio_element && audio_element.tagName === 'AUDIO') {
    // 处理可能的播放错误（比如浏览器自动播放限制）
    audio_element.play().catch(err => {
      console.error('音频播放失败:', err);
    });
  }
}

2. 确保Font Awesome图标能显示：
   如果主题没集成Font Awesome，在WPCode里添加一段HTML代码加载图标库：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

3. 检查HTML结构：确保button和audio标签是相邻的兄弟元素，中间没有其他元素插入。

二、更简便的插件方案 #

如果不想写代码，推荐几个轻量级插件：

• Audio Button：专门针对单音频点击播放场景，支持自定义图标样式，直接在区块编辑器里添加，无需手动写代码
• WP Audio Player Lite：轻量级播放器，可设置为极简按钮模式，适合单词/短语的快速播放需求
• Shortcodes Ultimate：内置音频短码，能生成简洁的播放按钮，还支持自定义样式和布局

内容的提问来源于stack exchange，提问作者Bryan Higgs