Get Automatic Meta Data Audio Duration

When I have a lot of audio list data displayed, the audio duration information presented is also important to display, the problem will arise when the data is large and dynamic. The data display will be as follows.

Prerequire

• Javascript script functions, arrays
• Jquery selection

Html durasi audio

In the html there is a class duration-time which will be used to collect duration data, while {$k} will show the unique sequence/numbering of duration.

<small class="text-muted small pb-3">
    <i class="fas fa-clock"></i> <span src-mp3="http://src.mp3" class="durtime{$k} duration-time" num="{$k}"></span>
</small>

Function Get Duration

This function will retrieve the duration audio meta data which will then be sent to the cb() . function

    function getDuration(src, cb) {
        var audio = new Audio();  
        audio.src = src; 
        $(audio).on("loadedmetadata", function(){ 
            var minutes = parseInt(audio.duration / 60, 10);
            var seconds = parseInt(audio.duration % 60);
            if (seconds < 10){ seconds = '0'+seconds; }
            if (minutes < 10){ minutes = '0'+minutes; }
            var durasi =  minutes+":"+seconds;
            cb(durasi);
           // console.log(durasi);
        });     
    }

Running the script

After that, the large amount of data will be collected into an array which will then be queryed and run the getDuration() function and the cb() function will be filled with writing data to the durtime${k} class based on the k order.

  var alldur = $('.duration-time');
  alldur.each(function(){
    var srcs = $(this).attr('src-mp3');
    var nums = $(this).attr('num');
    getDuration(srcs,  function(e){
      $(`.durtime${k}`).text(e);
    });
  });

Done