How can I get the file size of a created audio element in JavaScript?

Question

How can I get the file size of a non-DOM created audio element?

I thought I could use the HTML5 File API – as per Client Checking file size using HTML5? – but it doesn't seem to be working for elements not in the DOM.

I've created an example below – see the line console.log(audio_file.files[0].size);, which gives an error of:

TypeError: audio_file.files is undefined

// Create a non-dom allocated Audio element
var audio_file = document.createElement('audio');

// Define the URL of the MP3 audio file
audio_file.src = "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3";

// Once the metadata has been loaded, display the duration in the console
audio_file.addEventListener('loadedmetadata', function(){
    // Obtain the duration in seconds of the audio file
    var duration = audio_file.duration;
    
    const duration_hhmmss = new Date(duration * 1000).toISOString().substr(11, 8);

    console.log("The duration of the song is of: " + duration_hhmmss);
    console.log(audio_file.files[0].size);
},false);

`Uncaught TypeError: audio_file.files is undefined` unfortunately. — SparrwHawk, Mar 27 '21 at 18:19
I know but I meant what does the audio_file object print Do console.log(audio_file); — MalcolmInTheCenter, Mar 27 '21 at 18:21
console logging the file works fine, as you can see here – https://codepen.io/SparrwHawk/pen/yLgJLgp?editors=1111 — SparrwHawk, Mar 27 '21 at 18:24
Audio object doesn't have this attribute. I guess you need to create a File object and after set it to your audio Object. This way you can get all you need. — Vinicius Silveira Alves, Mar 27 '21 at 18:35
Take a look at this https://jsfiddle.net/derickbailey/s4P2v/ Might help you — MalcolmInTheCenter, Mar 27 '21 at 18:37
That's helpful, thank you. But is it possible to load a file from a URL? e.g. https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3 Rather than have the user select it. For some context, I'm trying to fetch an MP3 from a hosted podcasting site and get its file size — SparrwHawk, Mar 27 '21 at 18:46

score 1 · Accepted Answer · answered Mar 27 '21 at 21:04

I tried by making a fetch call and calculated the size of the file from blob.

But downside is, we cant know the size of the file until its completely loaded as the response headers of the given mp3 url didnt have any info related to size.

Here I have set the audio data after its fetched to the audio element, but this is not necessary. I just added it to play the audio file.

(You will have to wait till the file has loaded to see result after pressing Run code snippet.)

const audioEl = document.querySelector('audio');

fetch(
  "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
)
  .then((response) => {
    // console.log(response);
    return response.body
  })
  .then((data) => {
    var reader = data.getReader();
    return new ReadableStream({
      start(controller) {
        return pump();
        function pump() {
          return reader.read().then(({ done, value }) => {
            // When no more data needs to be consumed, close the stream
            if (done) {
              controller.close();
              return;
            }
            // Enqueue the next data chunk into our target stream
            controller.enqueue(value);
            return pump();
          });
        }
      }
    });
  })
  .then((stream) => new Response(stream, {headers: {'Content-Type': 'audio/mpeg'}}))
  .then((response) => response.blob())
  .then(blob => {
    // console.log(blob);
    const reader = new FileReader();
    reader.addEventListener('loadend', () => {
       audioEl.src = reader.result; // output of reader.readAsDataURL
    });
    reader.readAsDataURL(blob);

    const sizeInByte = blob.size;
    const sizeInMB = sizeInByte / 1024 / 1024;
    document.querySelector('#size').innerText = `Size of the loaded audio is ${sizeInMB.toFixed(2)}MB`;
  });

<audio controls></audio>
<div id="size"></div>

This works great, thank you Gowtham! The only thing I changed is the first line since I wanted to load the file in the background (it's not on the page). I did this by changing the first line to `const audioEl = document.createElement('audio');` — SparrwHawk, Mar 28 '21 at 11:40

How can I get the file size of a created audio element in JavaScript?

1 Answers1