Javascript Audio Suchleiste aktualisiert nicht auf Autoplay

Question

Ich habe diese JavaScript-Audio-Player codiert und funktioniert mit Ausnahme der Fortschrittsbalken. Ich kann Songs zum Autoplay abrufen, aber wenn ich das mache, zeigt die Suchleiste keinen Fortschritt an oder ändert die Zeit beim Klicken nicht. Das Gleiche passiert, wenn ich Titel vorwärts oder rückwärts überspringe. Die Fortschrittsanzeige wird aktualisiert, wenn ich den Song mit den Pausen-/Wiedergabetasten stoppe und neu starte. Ich bekomme

Fehler, der von meiner jquery-ui-Datei stammt. Irgendwelche Ideen, was könnte das verursachen? Vielen Dank.

Javascript:

jQuery(document).ready(function() { 

    // inner variables 
    var song; 
    var tracker = $('.tracker'); 
    var volume = $('.volume'); 

    function initAudio(elem) { 
     var url = elem.attr('audiourl'); 
     var title = elem.text(); 
     var cover = elem.attr('cover'); 
     var artist = elem.attr('artist'); 

     $('.player .title').text(title); 
     $('.player .artist').text(artist); 
     $('.player .cover').css('background-image','url(data/' + cover+')'); 

     song = new Audio('data/' + url); 

     // timeupdate event listener 
     song.addEventListener('timeupdate',function(){ 
      var curtime = parseInt(song.currentTime, 10); 
      tracker.slider('value', curtime); 
     }); 

     $('.playlist li').removeClass('active'); 
     elem.addClass('active'); 
    } 
    function playAudio() { 
     song.play(); 

     tracker.slider("option", "max", song.duration); 

     $('.play').addClass('hidden'); 
     $('.pause').addClass('visible'); 
    } 
    function stopAudio() { 
     song.pause(); 

     $('.play').removeClass('hidden'); 
     $('.pause').removeClass('visible'); 
    } 

    // play click 
    $('.play').click(function (e) { 
     e.preventDefault(); 

     playAudio(); 
    }); 

    // pause click 
    $('.pause').click(function (e) { 
     e.preventDefault(); 

     stopAudio(); 
    }); 

    // forward click 
    $('.fwd').click(function (e) { 
     e.preventDefault(); 

     stopAudio(); 

     var next = $('.playlist li.active').next(); 
     if (next.length == 0) { 
      next = $('.playlist li:first-child'); 
     } 
     initAudio(next); 
     song.load(); 
     tracker.slider(); 
     playAudio(); 
    }); 

    // rewind click 
    $('.rew').click(function (e) { 
     e.preventDefault(); 

     stopAudio(); 

     var prev = $('.playlist li.active').prev(); 
     if (prev.length == 0) { 
      prev = $('.playlist li:last-child'); 
     } 
     initAudio(prev); 
     playAudio(); 
    }); 

    // show playlist 
    $('.pl').click(function (e) { 
     e.preventDefault(); 

     $('.playlist').toggle(300); 
    }); 

    // playlist elements - click 
    $('.playlist li').click(function() { 
     stopAudio(); 
     initAudio($(this)); 
     playAudio(); 
    }); 

    // initialization - first element in playlist 
    initAudio($('.playlist li:first-child')); 

    // set volume 
    song.volume = 0.8; 

    // initialize the volume slider 
    volume.slider({ 
     range: 'min', 
     min: 1, 
     max: 100, 
     value: 80, 
     start: function(event,ui) {}, 
     slide: function(event, ui) { 
      song.volume = ui.value/100; 
     }, 
     stop: function(event,ui) {}, 
    }); 

    // empty tracker slider 
    tracker.slider({ 
     range: 'min', 
     min: 0, max: 10, 
     start: function(event,ui) {}, 
     slide: function(event, ui) { 
      song.currentTime = ui.value; 
     }, 
     stop: function(event,ui) {} 
    }); 

    song.load(); 
    $('.play').trigger('click'); 

}); 

Answer 1

hier ist das Stück Code, um

geändert

// timeupdate event listener 
     song.addEventListener('timeupdate',function(){ 
      var curtime = parseInt(song.currentTime, 10); 
      tracker.slider('value', curtime); 
      tracker.slider("option", "max", song.duration); 
     }); 

     $('.playlist li').removeClass('active'); 
     elem.addClass('active'); 
    } 
    function playAudio() { 
     song.play(); 

     $('.play').addClass('hidden'); 
     $('.pause').addClass('visible'); 
    }