Send custom HTTP request header with HTML5 audio tag

by

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"
        })
    );    
  }
});

Edit: 2018-11-17 – Added how this won’t work with older browsers.

More Related Contents:

  1. Is it possible to style html5 audio tag?
  2. Best approach to real time http streaming to HTML5 video client [closed]
  3. How to stream audio/video files such as MP3, MP4, AVI, etc using a Servlet
  4. HTML5 – How to stream large .mp4 files?
  5. Playing m3u8 Files with HTML Video Tag
  6. Audio Tag Autoplay Not working in mobile
  7. Play audio local file with html
  8. HTML5 audio not working on Firefox
  9. How can I get the html5 audio’s duration time
  10. HTML embed autoplay=”false”, but still plays automatically
  11. Decrease bitrate on WAV file created with recorderjs
  12. Autoplay audio on mobile safari
  13. How to place a div over a image? [closed]
  14. Can I nest a element inside an using HTML5?
  15. Inputting a default image in case the src attribute of an html is not valid?
  16. target=”_blank” vs. target=”_new”
  17. HTML5 download attribute not working when downloading from another server, even when Access-Control-Allow-Origin is set to all (*)
  18. Is there a way to style part of an input field’s value? [duplicate]
  19. Assign an initial value to radio button as checked
  20. Preventing Firefox from remembering the input value on refresh with a meta tag
  21. How to change color of disabled html controls in IE8 using css
  22. Printing HTML table with many columns/rows using CSS layout?
  23. Is it OK to use a self closing DIV tag? [duplicate]
  24. flex-grow not working in column layout
  25. Min-width and max-height for table attributes
  26. Items that span all columns/rows using CSS grid layout
  27. How to get CSS to select ID that begins with a string (not in Javascript)?
  28. How to make a DIV not wrap?
  29. When to use line breaks vs CSS positioning?
  30. CSS crop string in the middle

Leave a Comment