在音频上设置src时，我可以使用javascript来检索内容标题吗？

Question

我正在使用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();
});

音频播放正常，但我还想在音频开始流式传输时在标签中显示文件名。问题是，在我从该URL开始流式传输音频之前，我只知道文件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;
    });
});

但我找不到任何类似的文档。

Answer 1

你可以，但不幸的是，它并不容易。

首先，您的服务器配置必须正确支持您的页面所在域的CORS。

接下来，您将不得不切换到使用MediaSource Extensions，以便您可以使用Fetch API自行请求媒体并拦截响应标头。 https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

作为替代方案，您可以考虑使用Web Workers来处理提取。我自己没有尝试过，所以我没有任何具体的建议，但我的理解是你可以这样做并继续使用常规音频标签src，就像你现有的代码一样。

另一种（尽管不太理想）替代方案是使用Fetch API发出单独的HEAD请求。这不是很好，因为这个单独的请求可能与您的第一个请求有不同的响应。但是，这对你来说是可能的。