訪問 HTML5 音頻響應頭

Question

是否可以在 Javascript中以任何方式訪問 HTML5 音頻源的 HTTP-Response-Headers（以便我可以閱讀它們）？

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

編輯2：

似乎有可能通過（ 服務工作者）訪問標頭，我嘗試了類似的方法：

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 標頭）。

編輯

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