JavaScript: fetch() invalid url (convert blob to file)

I need to convert a blob object to an audio (.mp3) file. I used getUserMedia() and received the data from the user’s microphone as a blob object (the encoding is .mp3, 160 samplerate). Consider audioElement as an audio element on my HTML page and audioElementSource as src atribute for the <audio> tag.

Example value for audioElementSource variable: blob:http://127.0.0.1/4a9c819c-549b-45b4-bc1e-78e8c6f9a953

Created blob object is the source for the audio element. As I know, the blob object is raw (binary?) data stored in browser’s memory and is accesible via link (?). Next the user clicks the submit button and the blob object is to be converted to a .mp3 file and sent to the server. Here’s the code:

Button’s code on the HTML page:
<button type="button" onclick="add_spkr()">Add audio</button>

JS code (the same HTML page):

function add_spkr() {

let audioElement = document.getElementById('audio'); // the audio element
var aeb = audioElement.src; // contains blob:http://127.0.0.1/... string

// ?? .MP3 FROM URL ??
// my_file = ??
                
$.ajax({
    type: "POST",
    url: 'foo.php', // backend
    data: {name: "some_name", audio_file: my_file},
    success: function(response) {}
});

}

In add_spkr() function I need somehow to create an audio file. Inserting
let get_my_blob_back = await fetch(aeb).then(r => r.blob());
into add_sprk() function is not working. fetch says “invalid url”. The url with “blob:” part omitted is invalid, too. The url with “localhost” instead of “127.0.0.1” is invalid, too. I know I “duplicate” the blob in memory. Existing solutions don’t fit my problem or need fetch function. I’m completely confused and I would be happy to get help from more experienced programmers.