如何终止音频流下载而非暂停播放 附前端实现代码示例

要实现终止正在下载的音频流而非仅暂停播放，你可以通过重置audio元素资源加载的方式完成，修改代码如下：

1. 替换暂停音频逻辑 #

将原有pauseAudio函数替换为具备终止流下载能力的stopAudio函数：

function stopAudio(player) {
  // 先暂停当前播放
  player.pause();
  // 清空音频资源地址
  player.setAttribute("src", "");
  // 触发加载重置，彻底终止正在进行的流下载请求
  player.load();
}

2. 修改逻辑调用 #

更新manageAudio函数中的方法调用：

function manageAudio(player, opts) {
  if (opts.playing) {
    // 替换原有的pauseAudio调用为stopAudio
    stopAudio(player);
  } else {
    playAudio(player, opts.src);
  }
}

实现原理 #

• 原生pause()方法仅会暂停播放动作，浏览器仍然会继续下载音频流直到缓存满足播放要求
• 清空src属性后调用load()方法，会让浏览器主动终止当前音频的下载请求，完全停止资源拉取
• 下次播放时重新为audio元素赋值src即可正常加载资源，不会影响后续播放逻辑

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