Getting the duration of an mp3 file in a variable

Question

I want to get the duration of an audio on a variable, though it always returns NaN.

I've looked through other posts and most of the answers talk about having to load the metadata of the audio file, I tried many of their solutions but it alwyas returns NaN.

Both of these are returning NaN:

        audio.addEventListener('loadedmetadata', function(){
           audio.setAttribute("data-time", audio.duration);
        }, false)
        console.log(audio.duration);
        audio.play();

        audio.onloadedmetadata = function() {
            console.log(audio.duration);
        };
        audio.play();

The audio does play with no problems, and other methods do work, I just can't get the duration of the audio.

Any idea?

Tyia

You can try the solution here: https://stackoverflow.com/questions/34647536/how-to-get-audio-duration-value-by-a-function. In your first script, if you put the console.log inside the callback function that does "audio.setAttribute", even that might work. — Venky Viswanath, Feb 14 '22 at 20:51
Does this answer your question? [how to get audio.duration value by a function](https://stackoverflow.com/questions/34647536/how-to-get-audio-duration-value-by-a-function) — fdcpp, Feb 15 '22 at 08:24

score 1 · Accepted Answer · answered Feb 14 '22 at 20:49

there is a couple of way to reach your goal:

Setup your input field:

<input type="file" id="fileinput"/>

The first is from your local file:

var audio = document.createElement('audio');

// Add a change event listener to the file input
document.getElementById("fileinput").addEventListener('change', function(event){
    var target = event.currentTarget;
    var file = target.files[0];
    var reader = new FileReader();
  
    if (target.files && file) {
        var reader = new FileReader();

        reader.onload = function (e) {
            audio.src = e.target.result;
            audio.addEventListener('loadedmetadata', function(){
                // Obtain the duration in seconds of the audio file (with milliseconds as well, a float value)
                var duration = audio.duration;
            
                // example 12.3234 seconds
                console.log("The duration of the song is of: " + duration + " seconds");
                // Alternatively, just display the integer value with
                // parseInt(duration)
                // 12 seconds
            },false);
        };

        reader.readAsDataURL(file);
    }
}, false);

The last approach is from an url:

var mp3file = "https://example.com/myaudio.mp3";

// Create an instance of AudioContext
var audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Make an Http Request
var request = new XMLHttpRequest();
request.open('GET', mp3file, true);
request.responseType = 'arraybuffer';
request.onload = function() {
    audioContext.decodeAudioData(request.response, function(buffer) {
        // Obtain the duration in seconds of the audio file (with milliseconds as well, a float value)
        var duration = buffer.duration;

        // example 12.3234 seconds
        console.log("The duration of the song is of: " + duration + " seconds");
        // Alternatively, just display the integer value with
        // parseInt(duration)
        // 12 seconds
    });
};

// Start Request
request.send();

Have a nice day

score 0 · Answer 2 · answered Mar 23 '22 at 22:39

Pretty simple and readable way assuming you already have a file object from an input:

const getDuration = (file) => {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onloadend = (e) => {
        const ctx = new AudioContext();
        const audioArrayBuffer = e.target.result;
        ctx.decodeAudioData(audioArrayBuffer, data => {
            // this is the success callback
            const duration = data.duration;
            console.log('Audio file duration: ' + duration);
        }, error => {
            // this is the error callback
            console.error(error);
        });
    };
};

Getting the duration of an mp3 file in a variable

2 Answers2