DEV Community

Cover image for Get Automatic Meta Data Audio Duration
andysaktia
andysaktia

Posted on

3 2

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.

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

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);
        });     
    }
Enter fullscreen mode Exit fullscreen mode

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);
    });
  });
Enter fullscreen mode Exit fullscreen mode

Done

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay