访问HTML5音频响应头

Question

在JavaScript中，是否有可能以任何方式访问HTML5音频源的HTTP响应头（以便我可以读取它们）？

<audio id="myaudio" controls>
   <source src="/test.mp3" type="audio/mpeg">
</audio> 

编辑2：

似乎可以使用服务工作者（service workers）来访问头信息。我尝试了以下操作：

if ('serviceWorker' in navigator) {
   console.log('CLIENT: service worker registration in progress.');
   navigator.serviceWorker.register('/service-worker.js').then(function(){
      console.log('CLIENT: service worker registration complete.');
     }, function() {
          console.log('CLIENT: service worker registration failure.');
     });
} else {
   console.log('CLIENT: service worker is not supported.');
}

我的 service-worker.js 看起来是这样的（仅作为示例！）：

self.addEventListener('fetch', function(event) {
   console.log("SENDING REQUEST: " + event.request.url);
   if(event.request.url === 'https://localhost/test.mp3') {
      event.respondWith(
         fetch(event.request.url, {
            method: "GET",
            headers: {
               "Authorization": "myToken",
            },
            redirect: "follow"
         }).then(function(response) {
            //check for response header here...
            return response;
         })
      );    
    }
 });

我的问题是，我无法使用Firefox 70来调试代码，这使得测试变得更加困难，我也不能得出最终答案...

- Ben

---

当你说“Get access to”时，你的意思是查看它们吗？ - Sean T

@SeanT：是的，我想读取头部（和值）。 - Ben

@Ben 或许可以尝试使用 loadeddata 或 loadedmetadata 事件？在你的示例中，self 是什么？ - SpoonMeiser

根据文档，这些事件无法帮助获取响应的HTTP头信息。 - Ben

Answer 1

如果您只想查看标头，请在Chrome中加载页面并按F12打开开发人员工具。

所有响应都将在“网络”选项卡下，单击响应，您将看到与其相关的数据（包括http标头）。 编辑 如果您想在js / jquery中执行此操作，最好的方法是为每个源制作ajax请求，然后以这种方式获取响应。

例如...

let url = $('#myaudio').find('source').first().attr('src');

$.ajax({
    //ajax config with `url` for audio source
})
.done(function(response, textStatus, xhr){
    let headers = xhr.getAllResponseHeaders();
});

- Sean T

---

问题是在询问是否可以用JS实现，而不是一般性的问题。 - user47589

哦，是的...我错过了标签。可以用ajax完成，所以我会更新。 - Sean T

@Ben 我不知道其他的方法，但是音频控件的响应肯定是在你的JavaScript编译页面之前加载的。你可以尝试在js加载后动态分配源，并为响应添加事件监听器。 - Sean T

@ben 我认为 audio 或 source 标签不允许你将事件处理程序绑定到请求管道；据我所知，只有在自己发出请求的情况下才能访问头信息。虽然我持怀疑态度，但可能可以将此请求的结果绑定到音频源。 - user47589

你们两个听说过 self.addEventListener('fetch'... 吗？据我所知，这个应该可以用，但我的监听器从未被调用。我已经在我的JS中动态地加载音频源（通过将源设置为一个URL）。 - Ben