我正在使用HTML5音频控件来播放从服务器流式传输的mp3文件:
<audio id="audio" controls="controls" src="">
</audio>
当用户点击按钮时,我会动态设置该音频控件的src
:
$('#myBtn').on('click', function (e) {
var audio = document.getElementById('audio');
audio.src = "/api/audio/f56i4gi8lh";
audio.load();
});
音频播放正常,但我还想在音频开始流式传输时在标签中显示文件名。问题是,在我开始从该网址流式传输音频之前,我只知道文件 id 而不是文件名。该文件名称包含在回复标题中(来自/api/audio/f56i4gi8lh
的回复。
我在调试时可以使用我的F12工具在标题中看到文件名:
有没有办法使用javascript或jQuery将标题中的文件名提取到javascript变量中(同时设置音频控件的src
)?
我认为这将是这样的:
$('#myBtn').on('click', function (e) {
var audio = document.getElementById('audio');
audio.src = "/api/audio/f56i4gi8lh";
audio.load(function(response) {
var name = response.Header.filename;
});
});
但我找不到任何类似的文档。
答案 0 :(得分:0)
你可以,但不幸的是,它并不容易。
首先,您的服务器配置必须正确支持您网页所在域的CORS。
接下来,您必须切换到使用MediaSource Extensions,以便您可以使用Fetch API自行请求媒体并拦截响应标头。 https://developer.mozilla.org/en-US/docs/Web/API/MediaSource
作为替代方案,您可以考虑使用Web Workers来处理提取。我自己没有试过这个,所以我没有任何具体的建议,但我的理解是你可以这样做并继续使用常规音频标签src,就像你现有的代码一样。 / p>
另一种(尽管不太理想)替代方案是使用Fetch API发出单独的HEAD请求。这并不是很好,因为这个单独的请求可能与您的第一个请求有不同的响应。但是,这对你来说是可能的。