使用jQuery实现音频播放结束触发函数并终止前播放音频

咱们直接针对你的两个需求给出完整的优化方案，同时拆解关键细节帮你理解：

完整实现代码 #

HTML 结构 #

<div id="audio-holder" class="text-center"> </div>

JavaScript（jQuery）代码 #

// 全局变量存储当前正在播放的音频实例
let currentAudio = null;

// 动态创建音频触发元素
$.each(page15, function(key, value) {
  $("#audio-holder").append(`<span class='word' data-audio-path='${value.audio}'>${value.word}</span>`);
});

// 绑定点击事件处理音频播放（用事件委托兼容动态元素）
$(document).on("click", ".word", function() {
  const audioSrc = $(this).attr("data-audio-path");
  
  // 停止当前正在播放的音频（如果存在）
  if (currentAudio) {
    currentAudio.pause();
    currentAudio.currentTime = 0; // 重置播放进度到开头
    currentAudio = null;
  }

  // 创建新音频实例并配置
  const audioElement = document.createElement('audio');
  audioElement.setAttribute('src', audioSrc);
  
  // 绑定播放结束事件，触发自定义函数
  audioElement.addEventListener('ended', function() {
    // 这里替换成你需要执行的自定义逻辑
    console.log("当前音频播放完毕！");
    yourCustomFunction();
  });

  // 开始播放并保存当前实例
  audioElement.play();
  currentAudio = audioElement;
});

// 示例自定义函数，可根据需求修改
function yourCustomFunction() {
  alert("音频播放结束，自定义函数已执行！");
}

关键细节说明 #

1. 解决多音频互斥播放 #

• 用全局变量 currentAudio 记录当前活跃的音频实例，每次点击新元素时：
  • 先检查是否有正在播放的音频，若有则暂停并重置进度，避免下次播放从中间开始
  • 再创建新的音频实例并播放，确保同一时间只有一个音频在运行

2. 实现播放结束触发自定义函数 #

• 利用 HTML5 Audio 原生的 ended 事件，这个事件会在音频播放完全结束时自动触发
• 在播放前给音频元素绑定该事件，回调函数里直接调用你的自定义逻辑即可，注意要在 play() 之前绑定，防止错过事件触发

3. 兼容动态创建的元素 #

• 原来的直接绑定事件的方式对动态生成的 .word 元素可能失效，换成事件委托 $(document).on("click", ".word", ...)，能确保后续新增的元素也能响应点击

4. 代码可读性优化 #

• 把原来的字符串拼接改成 ES6 模板字符串，避免引号转义问题，代码更整洁

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