HTML 音频互联网流缓存问题答案

【问题标题】：HTML audio internet stream caching issueHTML 音频互联网流缓存问题
【发布时间】：2021-04-20 17:46:50
【问题描述】：

我正在创建一个使用 HTML 音频元素播放实时音频流的单页应用程序。很多时候我遇到浏览器似乎正在缓存以前播放的流中的音频的问题。

有人对如何清除缓存的音频有建议吗？我想做这样一个音频流可以在用户每次播放时重新开始。

例如，我播放音频流#1，然后切换到音频流#2 一会儿。当我切换回流 #1 时，它会尝试播放我上次停止的流，有时它会与流 #1 上当前正在播放的内容混在一起。

每次我播放一个新的音频流时，我只是在运行这个基本的 Javascript 代码：

if (!this.htmlAudioElement.paused) {
  this.htmlAudioElement.pause();
  this.htmlAudioElement.removeAttribute('src');
}

this.htmlAudioElement.setAttribute('src', '<streamUrl>');
this.htmlAudioElement.play();

编辑 1/20/21 正如所要求的，以下是我遇到问题的示例流：

http://npr-ice.streamguys1.com/live.mp3

请求标头

GET /live.mp3 HTTP/1.1
Host: npr-ice.streamguys1.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0
Accept: video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5
Accept-Language: en-US,en;q=0.5
Range: bytes=0-
Connection: keep-alive
Referer: <My IP>

响应标头

HTTP/1.1 200 OK
Content-Type: audio/mpeg
Date: Wed, 20 Jan 2021 20:14:50 GMT
icy-br: 96
ice-audio-info: bitrate=96
icy-br: 96
icy-description: NPR Program Stream
icy-genre: News and Talk
icy-name: NPR Program Stream
icy-pub: 0
Server: Icecast 2.4.0-kh10
Cache-Control: no-cache, no-store
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type
Access-Control-Allow-Methods: GET, OPTIONS, HEAD
Connection: Close
Expires: Mon, 26 Jul 1997 05:00:00 GMT

【问题讨论】：

您使用的直播网址是什么？服务器应该禁用缓存，我从来没有见过没有这样做的实时音频服务器。
它来自各种远程 URL（例如 NPR 直播等），但我认为并非所有远程流都有这个问题。所以你是说这是一个不在客户端的问题？客户端是否有某种方法可以从特定文件/URL 中清除缓存？
您需要提供一个示例，以便我们具体了解您在说什么。显示请求/响应标头。它可以是任何数量的东西。由于您现在的问题，我们无法重现该问题。
我在上面的原始问题中添加了一个示例。
缓存在响应头中被禁用。当响应标头是您所显示的内容时，我从来没有遇到过您所说的问题。你能展示一个重现这个问题的完整示例代码吗？

标签： javascript html reactjs html5-audio audio-streaming

【解决方案1】：

可能的解决方案...

(1) 使用.load(); 重置<Audio> 元素。这可能会阻止缓存/过度播放问题。

this.htmlAudioElement.load(); this.htmlAudioElement.play();

(2)我无法通过此代码设置重现您的问题（它可能会激发您自己的解决方案）：

<!DOCTYPE html>
<html>
<body>

<audio id="streamPlayer" controls>
<source src="http://npr-ice.streamguys1.com/live.mp3" type="audio/mpeg"> </audio>

<br> <br>
<button type="button" id="btn_01" onClick="do_BtnClick( 1 )"> Stream #1 </button>
<button type="button" id="btn_02" onClick="do_BtnClick( 2 )"> Stream #2 </button>
<button type="button" id="btn_03" onClick="do_BtnClick( 3 )"> Stream #3 </button>
<br>

</body>

<script>

var myAudio = document.getElementById("streamPlayer");

var stream1 = "http://npr-ice.streamguys1.com/live.mp3"; //Stream Guys 1
var stream3 = "https://imaginesouth-heliusmedia.radioca.st/stream/1/"; //Imagine Radio
var stream2 = "http://5.189.142.165:8032/stream/1/"; //70s/80s

function do_BtnClick ( radioNum )
{
    if( radioNum == 1) { myAudio.src = stream1; }
    if( radioNum == 2) { myAudio.src = stream2; }
    if( radioNum == 3) { myAudio.src = stream3; }
    
    myAudio.load(); myAudio.play();
}

</script>
</html>

【讨论】：

我按照您的建议在 .play() 之前添加了 .load() 并进行了一些测试。它现在似乎正在工作，没有我遇到的任何缓存问题。谢谢！