CODEWITHSUNDEEP
javascriptaudio
yksi
yksi

Reputation: 81

Getting the duration of an mp3 file in a variable

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

Upvotes: 0

Views: 4692

Answers (2)

Niv
Niv

Reputation: 619

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

Upvotes: 0

Gianfabio Pezzolla
Gianfabio Pezzolla

Reputation: 389

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

Upvotes: 1

Related Questions