एचटीएमएल 5 ऑडियो प्लेयर अवधि नैन

Question

दिखा रहा है मैंने अभी एचटीएमएल 5 सीखना शुरू किया और JQuery का उपयोग कर एचटीएमएल 5 ऑडियो प्लेयर के माध्यम से जा रहा था। मैंने प्लेलिस्ट के साथ एक खिलाड़ी को कोड किया, सब कुछ ठीक से काम करता है, जिसमें मेरी इनपुट रेंज स्लाइडर काम नहीं करता है। जब मैंने डीबग किया तो मुझे पता चला कि मेरी अवधि मुझे नैन दिखा रही है। गीत शुरू होने के बाद मैं अवधि निर्धारित कर रहा हूं।

यहाँ जब मैं प्लेलिस्ट गीत पर क्लिक करें मेरी जे एस कोड

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); 
    }); 

}); 

है, अवधि हमेशा नेन है लेकिन डिफ़ॉल्ट रूप से मैं जब मैं प्ले बटन तो अवधि क्लिक किया एक गीत की स्थापना की है, और सीधे पृष्ठ लोड पर ठीक काम करता है। यह प्लेलिस्ट गाने के लिए कभी काम नहीं करता है।

Answer 1

मेटाडेटा लोड होने पर ऑडियो के लिए अवधि प्राप्त करने के लिए लोडेड मेटाडेटा ईवेंट श्रोता का उपयोग करें। निम्न कोड की तरह कुछ करें:

var audio = new Audio(); 
audio.src = "mp3/song.mp3"; 
audio.addEventListener('loadedmetadata', function() { 
    console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds."); 
    audio.play(); 
});