Howler JS启用HTML5模式后页面无法刷新及音频无法续播求助

一、解决页面跳转/刷新卡顿问题 #

原beforeunload事件中调用stop()无效，是因为HTML5模式下Howler的stop()仅重置播放进度，并未彻底销毁音频资源，浏览器卸载页面时会等待资源释放，进而导致卡顿。需改用unload()方法销毁实例、释放资源，同时移除不必要的e.preventDefault()（会触发浏览器确认弹窗且不影响资源释放逻辑）。

修改后的beforeunload代码：

window.addEventListener('beforeunload', function() {
  Object.values(player).forEach(p => {
    if (p && p instanceof Howl) {
      p.unload(); // 彻底销毁音频实例，释放底层HTML5 Audio资源
    }
  });
});

二、解决暂停后无法续播问题 #

HTML5模式下，Howler默认不会自动保留暂停时的播放位置，需手动记录进度并在播放时跳转至对应位置。

修改核心逻辑代码：

let player = {}; // 改用对象存储实例，适配ID作为键的场景
let playPositions = {}; // 保存每个音频的播放进度

$('.g-player').each(function(){
  let id = $(this).data('id');
  player[id] = new Howl({
    src: [g.ajaxurl+'?nonce='+g.nonce+'&action=g_audio&id='+id],
    preload: true,
    format: ['flac'],
    html5: true,
    onend: function() {
      playPositions[id] = 0; // 播放完毕后重置进度
      $(`.g-player[data-id="${id}"]`).removeClass('playing').addClass('paused');
    }
  });
  playPositions[id] = 0; // 初始化进度为0
});

// 播放事件
$(document).on('click', '.g-player:not(.playing)', function(){
  let id = $(this).data('id');
  let howl = player[id];
  howl.seek(playPositions[id]); // 跳转至保存的进度
  howl.play();
  $(this).addClass('playing').removeClass('paused');
});

// 暂停事件
$(document).on('click', '.g-player.playing', function(){
  let id = $(this).data('id');
  let howl = player[id];
  playPositions[id] = howl.seek(); // 暂停前记录当前进度
  howl.pause();
  $(this).toggleClass('playing paused');
});

验证效果 #

同时应用上述修改后，在Chrome（含移动版）、Edge浏览器中测试：

• 播放状态下跳转/刷新页面无卡顿
• 暂停后再次点击可从暂停位置续播

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