javascript - 访问 HTML5 音频响应 header

Question

是否可以以任何方式在Javascript中访问HTML5音频源的HTTP响应 header (以便我可以读取它们)？

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

编辑2:

似乎可以使用 ( service workers ) 访问 header 我尝试过类似的事情:

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)，这使得测试变得有点困难，并且我无法创建最终答案......

Answer 1

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

所有响应都将位于“网络”选项卡下，单击响应，您将看到与其关联的数据(包括 http header )。

编辑

如果您想在 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();
});