发送带有 HTML5 音频标签的自定义 HTTP 请求标头答案

【问题标题】：Send custom HTTP request header with HTML5 audio tag发送带有 HTML5 音频标签的自定义 HTTP 请求标头
【发布时间】：2012-03-07 03:17:52
【问题描述】：

是否可以使用 HTML5 音频标签发送自定义 HTTP 请求标头？我对发送 HTTP Range 标头特别感兴趣，因此网络服务器只会流式传输 mp3 文件的一部分。我在audio tag api 中找不到这样做的方法。

【问题讨论】：

标签： html audio streaming

【解决方案1】：

如果您可以不支持 IE 等旧版浏览器，您现在可以使用服务人员来执行此操作。拦截 service worker 中的 fetch 请求并使用自定义标头继续发送。下面是截取对 Google Drive 的请求并添加 Bearer 令牌的基本示例。

self.addEventListener('fetch', function(event) {
  if(event.request.url === 'https://www.googleapis.com/drive/v3/files/fileID?alt=media') {
    event.respondWith(
        fetch(event.request.url, {
            method: "GET",
            headers: {
                "Authorization": "Bearer myBearerToken",
            },
            redirect: "follow"
        })
    );    
  }
});

编辑：2018-11-17 - 添加了如何在旧版浏览器中无法使用。

【讨论】：

这如何与音频标签一起使用？它似乎没有触发 fetch 事件。

【解决方案2】：

不是根据spec，你不能。音频标签实际上非常不灵活。

【讨论】：

【解决方案3】：

要回答广泛的问题...这将取决于具体的请求类型。

您想要[ed] 做的事情实际上是非常可能的。您只需将#t=start[,end] Media Fragment 添加到任何媒体网址，浏览器就会知道它只能从这些时间戳开始播放：

<!-- only from 23s to 27s -->
<audio src="https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3#t=23,27" controls></audio>

由于我来自未来，我确实提出了一个关于发送授权和媒体请求的问题，这里是一些关于crossOrigin attribute 的文档的链接，这也将使您的 HTTP带有“自定义标头”的请求。

【讨论】：