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
Top comments (0)