HTML音频互联网流缓存问题

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

有没有人对如何清除缓存音频的建议?我想让音频流每次用户播放时都能重新开始。

例如，我播放音频流#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

可能的解决方案…

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

相关内容

最新更新

热门标签：