MediaRecorder working in Firefox, but not in Chrom

Question

Here is a jsfiddle of the working code: https://jsfiddle.net/Noitidart/z5dqpe8r/

If I load up the fiddle in Firefox it works perfect. It records the audio, sends it to watson and gets the results. However in Chrome, when it sends it to watson it gets an error. How can I get it to work in Google Chrome?

I based it on the code from the documentation here - https://www.ibm.com/watson/developercloud/doc/speech-to-text/input.html#formats - under audio/webm section it has this:

For JavaScript code that shows how to capture audio from a microphone in a Chrome browser and encode it into a WebM data stream, see jsbin.com/hedujihuqo/edit?js,console. Note that the code does not submit the captured audio to the service.

That jsbin linked is here - https://jsbin.com/hedujihuqo/edit?js,console

It works perfectly in Firefox. However it is not working in Chrome. In Firefox I actually needed to use audio/ogg. The jsbin from the docs say to use auio/webm for Google Chrome.

Here is my upload code:

let data = new FormData();
data.append('file', blob, 'recording.' + file_ext);
let results_res = await fetch('https://stream.watsonplatform.net/speech-to-text/api/v1/recognize', {
    method: 'POST',
    headers: {
        'Content-Type': 'audio/' + file_ext,
        'X-Watson-Authorization-Token': token
    },
    body: data
});

Any ideas on why it's not working in Chrome?