I am creating a single page application that plays live audio streams using the HTML audio element. Many times I run into the issue where the browser seems to be caching audio from a stream that was previously played.
Would anyone have suggestions on how to clear the cached audio? I'd like to make it so an audio stream can get a fresh start every time the user plays it.
For example, I play audio stream #1, and then switch to audio stream #2 for a bit. When I switch back to stream #1, it tries to play the stream where I last left off and sometimes it's mixed in with what is currently being played on stream #1.
Every time I play a new audio stream, I am just running this basic Javascript code:
if (!this.htmlAudioElement.paused) {
this.htmlAudioElement.pause();
this.htmlAudioElement.removeAttribute('src');
}
this.htmlAudioElement.setAttribute('src', '<streamUrl>');
this.htmlAudioElement.play();
Edit 1/20/21 As was asked for, below is an example stream where I get the problem:
http://npr-ice.streamguys1.com/live.mp3
Request 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>
Response 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