Send Custom Http Request Header with HTML5 Audio Tag

http headers to send file to html5 <audio>

Which formats and MIME types are supported by Mozilla is documented on their wiki. It doesn't look like the MIME type is your problem, but it's quite possible that this WAVE file isn't using the plain PCM audio which Firefox supports. WAVE can actually contain other formats like ADPCM, MP3 and whatnot. These may be supported by QuickTime, but there's no guarantee that it will play in a HTML5 browser. To be sure, try opening the file in a audio editor and saving it again as a WAVE PCM file.

load html5 audio from dynamic content provider with authentication

.. I spent some more time searching for other answers and found this post. I guess this is not possible this way.

Alternative Solution

The following code is a proof of concept following the described logic. But instead of using the html5 audio component, it uses the Web Audio Api.

let url = "myuri.org/auth/sources/37";

// create context
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create source
let source = audioCtx.createBufferSource();

// route source
source.connect(audioCtx.destination);

// prepare request
let request = new XMLHttpRequest();
request.open('GET', url, true /* async */ );
request.responseType = 'arraybuffer';

request.onload = function () {
    // on load callback

    // get audio data
    let audioData = request.response;

    // try to decode audio data
    audioCtx.decodeAudioData(audioData,
        function (buffer) {
            // on success callback
            console.log("Successfully decoded");

            // set source
            source.buffer = buffer;

            // .. do whatever you want with the source
            // e.g. play it
            source.start(0);
            // or stop
            source.stop();
        },
        function (e) {
            // on error callback
            console.log("An error occurred");
            console.log(e);
        });
};

request.setRequestHeader("Authorization", `Bearer ${authenticationToken}`);
request.send();

I hope this helps someone.

Related Topics