我有一个应用程序,用户可以请求收听一些音频。其中一些音频可能会很长,例如有时 16 小时,所以我想将音频流式传输到 html5 播放器,否则用户将不得不等待整个文件下载到他们的浏览器。
提供音频服务的后端是 Spring-boot 服务。
我发现在 Chrome 和 Firefox 中,播放器都会发送开放式范围请求:-
范围:字节=0-
我不想立即提供整个音频文件,因为创建大文件需要一些后端处理,因此请求会超时,但如果请求是针对前 1mb,那么那就是很好,但不幸的是浏览器没有这样做。
因此,在我的 API 中,我强制执行 1mb 限制,因此我的响应将包含以下标头:-
内容范围:字节0-999999/28800329
内容类型:音频/mpeg
内容长度:1000000
这最初看起来工作正常,chrome 浏览器注意到 28800329 字节并在播放器中正确显示这是一个 2 小时的音频文件,并开始播放,在后台,它开始发送请求以获取文件的其余部分,并且和以前一样,即使它要求:-
范围:字节=1000000-
我将其退回:-
内容范围:字节1000000-1999999/28800329
内容类型:音频/mpeg
内容长度:1000000
正如我所说,一切看起来都很好,当播放器到达音频中需要下一个块的点时,它就会拥有它并完美地播放。不幸的是,问题似乎出在搜索栏上。如果我将时间滑块移动到音频的一半,应该大约是 1 小时,但不幸的是,我只在发送的第一个块的一半处开始播放,即从大约 500,000 字节开始播放。它声称音频有 1 小时,但事实并非如此。
Firefox 的功能稍差一些,因为它似乎没有使用 28800329 来定义时间栏的长度,而是仅显示时间,就好像整个文件是第一个块(1mb),但是当它到达末尾时在该时间线上,时间不断增加并且继续播放。
我也尝试将内容长度设置为服务器上文件的完整大小,但没有成功。
任何人都可以找到解决方案,我使用 Angular 作为前端,使用 dotnet core 作为后端