Question

是否可以使用HTML5音频标签发送自定义HTTP请求标头？我对发送一个HTTP Range标头特别感兴趣，所以webserver只会传输部分mp3文件。我无法在audio tag api中找到办法。

Answer 1

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

Answer 2

如果可以不支持IE之类的较旧的浏览器，则可以与服务人员一起执行。在服务工作者中拦截提取请求，然后使用自定义标头将其发送出去。这是拦截对Google云端硬盘的请求并添加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-添加了如何在较旧的浏览器中无法使用。

Answer 3

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

您实际上想要做的事。您只需将#t=start[,end] Media Fragment添加到任何媒体URL，浏览器就会知道它只需要从以下时间戳开始播放：

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

并且由于我来自未来，这个问题的确询问了与媒体请求一起发送授权的问题，因此这里有一些有关crossOrigin attribute的文档的链接，这也将使您的带有“自定义标头” 的HTTP请求。

使用HTML5音频标记发送自定义HTTP请求标头

3 个答案: