使用 HTML5 音频标签发送自定义 HTTP 请求标头 [英] Send custom HTTP request header with HTML5 audio tag

问题描述

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

Is it possible to send custom HTTP request headers using the HTML5 audio tag? I'm especially interested in sending a HTTP Range header, so the webserver will only stream parts of an mp3 file. I couldn't find a way to do that in the audio tag api.

推荐答案

如果你不支持像 IE 这样的旧浏览器，你现在可以通过 Service Worker 做到这一点.在 Service Worker 中拦截 fetch 请求并将其与自定义标头一起发送.以下是拦截对 Google Drive 的请求并添加不记名令牌的基本示例.

If you're okay not supporting older browsers like IE, you can do this now with a service worker. Intercept the fetch request in the service worker and send it onwards with the custom header. Here is a basic example of intercepting a request to Google Drive and adding the Bearer token.

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 日 - 添加了这在旧浏览器中不起作用的方式.

2018-11-17 - Added how this won't work with older browsers.

这篇关于使用 HTML5 音频标签发送自定义 HTTP 请求标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！