如何在设置音频 src 时发送标头？

Question

我正在尝试使用 html5 音频标签播放音频文件。

很好玩……

但由于某种原因，要求浏览器为源发出请求，必须包含浏览器（在我的情况下为 safari）未添加的特定标头。 （我看到 chrome 添加了）

标头为：Accept-encoding: gzip

我怎样才能做到这一点？

我不想事先下载整个文件...我想要音频标签来处理它，带有一个新的标题。

document.getElementById("audio").load();
document.getElementById("audio").play();

<audio id="audio" src="https://upload.wikimedia.org/wikipedia/commons/transcoded/7/7b/FurElise.ogg/FurElise.ogg.mp3"> <audio>
    

再一次，当这段代码运行时，我只想修改为此发出的每个请求的标头...

注意：

当您添加源并加载到 chrome 中时，浏览器会发出“范围请求”，要求媒体文件的后续部分，以便它可以在一些数据可用时立即开始播放，但是，我的 CDN using 要求这些请求具有此特定标头，问题在于 chrome 中此标头是由 chrome 本身添加的，而在 safari 中则不是，因此我想拦截浏览器在媒体元素上调用 load() 时发出的这些请求并添加标题。 我不想在付款前下载整个文件，我知道这行得通，但这违背了目的。

Answer 1

既然您想要做的是加载然后播放，那么如何将您的请求与XMLHttpRequest 样式模式结合起来，使用类似fetch 的东西？

喜欢：

HTML

<!-- just an indicator, in case the file is large -->
<div id="loading"><em>File is loading. Please wait...</em></div>

<!-- initially hide the audio tag. Also, change the 'src' to 'data-src' so it doesn't automatically load -->
<audio id="audio" style="display: none;" data-src="https://upload.wikimedia.org/wikipedia/commons/transcoded/7/7b/FurElise.ogg/FurElise.ogg.mp3" controls></audio>

Javascript

// define variables
  var audioEl = document.getElementById("audio");
  function fetchAudioFile() {
    // go get the file
    var requestObj = new Request(audioEl.dataset.src, {
        method: 'GET',
        headers: {
          'Accept-encoding': 'gzip'   // add your header(s)
        },
        referrerPolicy: 'no-referrer'
    });

    fetch(requestObj).then(function(response) {
      return response;
    }).then(async function(outcome) {
      const blob = await outcome.blob();
      // convert our blob to a url that can be used by the audio tag
      const url = window.URL.createObjectURL(blob);
      // replace the source
      audioEl.src = url;
      // hide the helpful text
      document.getElementById("loading").style["display"] = "none";
      // show the audio tag
      audioEl.style["display"] = "block";
      // play it immediately
      audioEl.play();
    });
  };

// get the file
  fetchAudioFile();

希望这会有所帮助。请注意，根据浏览器的不同，有时音频可能不会自动播放，除非用户首先与页面交互或明确授予权限。