Downloading a data uri as file
While browsing some website, I ran into an audio player that had a source that was embedded:
<audio autoplay="">
<source type="audio/mpeg" src="data:audio/mpeg;base64,...LONG_BASE_64...">
</audio>
I wanted to save that audio, but it wasn’t trivial (no “save as” ui, no clear resource I can save from the network tab). I ended up with a small reusable method.
Start with right click the source element and choosing “use in console” to have it as temp0:
fetch(temp0.src)
.then(r => r.blob())
.then(blob => {
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "audio.mp3";
a.click();
});