如何用JS实现单词悬停变色、点击播放对应音频、移出恢复效果

• 标签语法错误：<font>标签未正常闭合，错误将换行标签<br>写为</br>并放在<font>标签内部，导致DOM结构混乱，事件绑定无法正常触发
• 使用了已被HTML标准废弃的<font>标签，兼容性不稳定
• 原有写法每个单词单独占一行，不符合「同一行展示多个单词」的需求
• 每次点击都新建音频实例，重复点击会出现多个音频重叠播放的问题

<script>
let activeAudio = null;
function playAudio(audioPath) {
  // 暂停重置上一个正在播放的音频，避免叠音
  if (activeAudio) {
    activeAudio.pause();
    activeAudio.currentTime = 0;
  }
  activeAudio = new Audio(audioPath);
  // 捕获播放异常，方便排查问题
  activeAudio.play().catch(e => console.log('音频播放异常，请检查文件路径是否正确', e));
}
</script>

<!-- 同一行展示所有可交互单词 -->
<div>
  <span 
    style="cursor: pointer; margin: 0 3px;"
    onmouseover="this.style.color='red'"
    onmouseout="this.style.color='black'"
    onclick="playAudio('audio1.mp3')"
  >Word1</span>
  <span 
    style="cursor: pointer; margin: 0 3px;"
    onmouseover="this.style.color='red'"
    onmouseout="this.style.color='black'"
    onclick="playAudio('audio2.mp3')"
  >word2</span>
  <span 
    style="cursor: pointer; margin: 0 3px;"
    onmouseover="this.style.color='red'"
    onmouseout="this.style.color='black'"
    onclick="playAudio('audio3.mp3')"
  >word3</span>
</div>

• 将代码中audio1.mp3、audio2.mp3、audio3.mp3替换为你实际的音频文件路径，路径错误会导致播放失败
• 代码给可点击单词加了手型鼠标样式、左右边距，交互体验更好，不需要可自行删除对应style属性
• 如果需要单词单独换行展示，在对应<span>标签后添加<br>即可，注意标签不要写反
• 现代浏览器有自动播放安全限制，用户首次和页面产生交互（如点击页面任意位置）后音频才能正常播放，属于正常策略，不是代码bug

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