HTML5 Audio元素调用play()后重启而非从暂停位置续播问题求解

问题根因 #

• 你每次点击播放按钮时，无论当前操作的是否是同一个音频，都会强制给两个audio实例重新赋值src，src更新会触发音频资源重新加载，播放进度自动重置为初始位置，这是暂停后再播放从头开始的核心原因。
• 额外冗余问题：你同时维护两个audio实例（一个静音、一个带进度条），很容易出现进度、状态不同步的问题，实际上直接使用带进度条的audio_pbar一个实例就可以满足需求。
• 隐藏问题：onended事件绑定写在点击回调内部，每次点击都会重复绑定事件，会导致结束逻辑触发多次。

修复方案 #

1. 新增变量存储当前正在播放的音频地址，点击播放时先判断是否和当前点击的按钮data-src一致：
   • 一致：不修改src，直接从当前进度调用play()
   • 不一致：更新src，从开头播放
2. 移除冗余的静音audio实例，减少状态同步问题。
3. 将onended事件绑定移到点击回调外部，避免重复绑定。

修改后的JS代码 #

var clicked_id;
// 只保留带进度条的audio实例即可，不需要额外静音实例
var audio_pbar= document.getElementById('pbar');
// 存储当前加载的音频地址
var currentSrc = '';

$('.ppbutton').on("click",function(){
  var datasrc = $(this).attr('data-src');
  clicked_id= $(this).attr('id');
  audio_pbar.pause();
  
  $('.ppbutton').not(this).removeClass('fa-pause').addClass('fa-play');
  
  if($(this).hasClass('fa-play')){
    // 只有切换了不同音频的时候才重新赋值src
    if(currentSrc !== datasrc){
      audio_pbar.src = datasrc;
      currentSrc = datasrc;
    }
    $(this).removeClass('fa-play').addClass('fa-pause');
    audio_pbar.play();
   } else {
     $(this).removeClass('fa-pause').addClass('fa-play');
     audio_pbar.pause();
   }
});
// 统一监听音频结束事件
audio_pbar.onended = function() {
   $("#"+clicked_id).removeClass('fa-pause').addClass('fa-play');
   currentSrc = '';
};

额外注意点 #

你的HTML中存在多个按钮id重复的问题（比如多个id为ppbutton3的按钮），id属性必须全局唯一，否则会导致onended回调中选择元素出错，建议修正为每个按钮的id唯一。

内容的提问来源于stack exchange，提问作者Jibran Mustafa Virk