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

【问题标题】：Can I use javascript to retrieve the content header when setting the src on audio在音频上设置 src 时，我可以使用 javascript 来检索内容标题吗
【发布时间】：2017-12-29 02:15:12
【问题描述】：

我正在使用 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 而不是文件名。该文件 name 包含在响应的标头中（来自/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;
    });
});

但我找不到任何关于此类的文档。

【问题讨论】：

标签： javascript jquery mp3 html5-audio audio-streaming

【解决方案1】：

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

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

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

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

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

【讨论】：