Downloading a data uri as file

less than 1 minute read

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