HTML5 Audio Player Duration Showing Nan
17,711
Use the loadedmetadata event listener to get the duration for the audio as soon as the metadata is loaded. Do something like the following code:
var audio = new Audio();
audio.src = "mp3/song.mp3";
audio.addEventListener('loadedmetadata', function() {
console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds.");
audio.play();
});
Author by
Nick
Updated on June 06, 2022Comments
-
Nick about 2 years
I just started to learn HTML5 and was going through HTML5 Audio player using JQuery. I coded a player with Playlist, everything works fine except the Duration with help of which my input range slider doesn't works. When I debugged I found that my duration is showing me NAN. I am setting the duration after the song is initialized.
Here is my JS code
jQuery(document).ready(function() { container = $('.container'); playList = $('#playlist'); playListSong = $('#playlist li'); cover = $('.cover'); play = $('#play'); pause = $('#pause'); mute = $('#mute'); muted = $('#muted'); close = $('#close'); song = new Audio('music/Whistle-Flo-Rida-Mp3-Download.mp3','music/Whistle-Flo-Rida-Mp3-Download.mp3'); var canPlay = song.canPlayType('audio/mpeg;'); if (canPlay) { song.type= 'audio/mpeg'; song.src= 'music/Whistle-Flo-Rida-Mp3-Download.mp3'; } playListSong.click(function(){ $('#close').trigger('click'); window["song"] = new Audio('music/'+$(this).html()+'.mp3','music/'+$(this).html()+'.mp3'); $('#play').trigger('click'); }); play.live('click', function(e) { e.preventDefault(); song.play(); //cover.attr("title", song.duration); $(this).replaceWith('<a class="button gradient" id="pause" href="" title=""><span>k</span></a>'); $('#close').fadeIn(300); $('#seek').attr('max',song.duration); }); pause.live('click', function(e) { e.preventDefault(); song.pause(); $(this).replaceWith('<a class="button gradient" id="play" href="" title=""><span>d</span></a>'); }); mute.live('click', function(e) { e.preventDefault(); song.volume = 0; $(this).replaceWith('<a class="button gradient" id="muted" href="" title=""><span>o</span></a>'); }); muted.live('click', function(e) { e.preventDefault(); song.volume = 1; $(this).replaceWith('<a class="button gradient" id="mute" href="" title=""><span>o</span></a>'); }); $('#close').click(function(e) { e.preventDefault(); container.removeClass('containerLarge'); cover.removeClass('coverLarge'); song.pause(); song.currentTime = 0; $('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""><span>d</span></a>'); $('#close').fadeOut(300); }); $("#seek").bind("change", function() { song.currentTime = $(this).val(); $("#seek").attr("max", song.duration); }); song.addEventListener('timeupdate',function (){ curtime = parseInt(song.currentTime, 10); $("#seek").attr("value", curtime); }); });
When I click on playlist song, the duration is always NAN but by default I have set one song, and directly on page load when I clicked Play button then the duration works fine. It never works for playlist songs.
-
Lars Ebert over 8 yearsIf you use the
durationchang
event instead, the duration display is updated every time it changes. -
fsschmitt almost 8 yearsWhen you are instantiating your audio object, you add the event listener, and then when the metadata is loaded it will trigger the callback function.
-
Maria Campbell over 6 yearsI just implemented the code in my app and i definitely gets rid of the NaN issue. The only problem is that the music immediately starts playing when I land on the page. is there a way of making this work AND being able to control when the music should play through the play/pause button? Thanks in advance!
-
Caio Kawasaki over 5 yearsAnd if the duration return as Infinity?