Audio object not working in blocks in JavaScript

Question

I'm trying to modify the innerText of element with class timeStamp. I tried console.log(audio.duration) which displayed NaN. This resulted in innerText having NaN. There is no fault in audio files and their paths. I want to see the audio.duration in the innerText.

The following is a part of HTML code:

<div class="songItem">
    <img src="covers/1.jpg" alt="1">
    <span class="songName">Legion</span>
    <span class="songListPlay"><span class="timeStamp">05:34</span><i id="1" class="fa-sharp songItemPlay fa-regular fa-circle-play"></i></span>
</div>
<div class="songItem">
    <img src="covers/2.jpg" alt="2">
    <span class="songName">Legion</span>
    <span class="songListPlay"><span class="timeStamp">05:34</span><i id="2" class="fa-sharp songItemPlay fa-regular fa-circle-play"></i></span>
</div>
<div class="songItem">
    <img src="covers/3.jpg" alt="3">
    <span class="songName">Legion</span>
    <span class="songListPlay"><span class="timeStamp">05:34</span><i id="3" class="fa-sharp songItemPlay fa-regular fa-circle-play"></i></span>
</div>

The following is the javascript code:

let songItems = Array.from(document.getElementsByClassName('songItem');
let songs = [ {songName: "A", filePath: "songs/1.mp3", coverPath: "covers/1.jpg"},
              {songName: "B", filePath: "songs/2.mp3", coverPath: "covers/2.jpg"},
              {songName: "C", filePath: "songs/3.mp3", coverPath: "covers/3.jpg"}];
songItems.forEach((element, i)=>{
    var audio = new Audio(songs[i].filePath);
    console.log(audio.duration) // displays NaN
    element.getElementsByClassName('timeStamp')[0].innerText = audio.duration;
});

I cannot find the bug. Can someone help?

you probably want `e.gEBCN(...)[i].iT` instead of `e.gEBCN(...)[0].iT`. but that won't fix the NaN issue. Most likely this is because the audio takes a while to download and isn't ready yet by the time you get to line 21 — Samathingamajig, Jul 03 '23 at 18:15
It does not have a value because the meta data is not loaded synchronously. It is asynchronous. — epascarello, Jul 03 '23 at 19:25
@epascarello you are right. The delayed loading of meta data is the problem. Do you know how to fix it? — Sam1921, Jul 04 '23 at 12:46
https://stackoverflow.com/questions/34647536/how-to-get-audio-duration-value-by-a-function — epascarello, Jul 04 '23 at 13:40

Audio object not working in blocks in JavaScript

0 Answers0