jQuery音频播放暂停按钮在音频结束后恢复为PLAY文本的实现问题

嘿，我来帮你搞定这个问题！你现在的代码已经实现了点击按钮切换播放/暂停状态，但确实漏掉了**音频播放结束后自动把按钮文本改回“PLAY”**这个场景的处理。

其实很简单，只需要给音频元素添加一个ended事件的监听，当音频播放完成时，自动更新按钮的文本就好啦。

下面是修改后的完整代码：

<a href="#/" class="ttt">PLAY</a>

<div class="podcast-content">
  <audio>
    <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
  </audio>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".ttt").click(function() {
  const audio = $(".podcast-content audio").get(0);
  if (audio.paused) {
    audio.play();
    $(".ttt").html('Pause');
  } else {
    audio.pause();
    $(".ttt").html('Play');
  }
});

// 新增：监听音频结束事件，重置按钮文本
$(".podcast-content audio").on('ended', function() {
  $(".ttt").html('PLAY');
});
</script>

关键修改说明： #

• 我把音频元素存成了变量audio，这样不用重复进行DOM查询，算是个小优化（不存也能正常运行，只是代码更高效一点）
• 新增的ended事件监听：当音频播放到末尾时，这个事件会自动触发，我们在回调里直接把按钮的内容改回“PLAY”就完成需求啦

你可以测试一下，现在音频播放结束后，按钮会自动变回“PLAY”状态～

备注：内容来源于stack exchange，提问作者Ercan