HTML 音频互联网流缓存问题

Question

我正在创建一个使用 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

请求Header

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>

回应Header

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

Answer 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>

HTML 音频互联网流缓存问题

HTML audio internet stream caching issue

html

javascript

audio-streaming

html5-audio

reactjs