javascript - jQuery - $(audio).on ('ended' function()) 只在第一个元素上触发一次

Question

我刚刚开始使用 jQuery，并按照教程构建了一个音频播放器。

我希望我的音频在每次歌曲结束时自动转到下一首歌曲并播放。

我在这里检查了一个完全按照我所做的教程的答案，但是这个答案没有解决问题。

我已经用“BROKEN”标记了非工作函数

var audio;

//hide pause button
$('#pause').hide();

//initialize first song
initAudio($('#playlist li:first-child'));

function initAudio(element){
    var song = element.attr('song');
    var artist = element.attr('artist');
    
    // Create Audio Object
    audio = new Audio('music/'+ song + '.mp3');
    
    // If no song loaded, show 0:00
    if(!audio.currentTime){
        $('#duration').html('0:00');
    }
    // otherwise get duration and show
    showDuration();
    
    // Get artist and song title
    $('#audio-player .audio-title').text('- ' + song);
    $('#audio-player .audio-artist').text(artist);
    
    $('#playlist li').removeClass('active-audio');
    element.addClass('active-audio');
}

// click playlist song
$('#playlist li').click(function(){
  audio.pause();
  initAudio($(this));
  audio.play();
  showDuration();
  $('#play').hide();
  $('#pause').show();
});

// play button
$('#play').click(function (){
    audio.play();
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    showDuration();
});
// pause button
$('#pause').click(function (){
    audio.pause();
    $('#pause').hide();
    $('#play').show();
    $('#duration').fadeIn(400);
    showDuration();
});

// Next button
$('#next').click(function(){
    audio.pause();
    var next = $('#playlist li.active-audio').next();
    if(next.length == 0){
        next = $('#playlist li:first-child');
    }
    initAudio(next);
    audio.play();
    showDuration();
    if($('#play').is(':visible')){
        $('#play').hide();
        $('#pause').show();
    }
});

// Prev button
$('#prev').click(function(){
    audio.pause();
    var prev = $('#playlist li.active-audio').prev();
    if(prev.length == 0){
        prev = $('#playlist li:last-child');
    }
    initAudio(prev);
    audio.play();
    showDuration();
    if($('#play').is(':visible')){
        $('#play').hide();
        $('#pause').show();
    }
});

// Volume Control
$('#volume').change(function(){
    audio.volume = parseFloat(this.value / 100);
});

// Time Duration
function showDuration(){
    $(audio).on('timeupdate', function(){
        //get hours $ mins
        var s = parseInt(audio.currentTime % 60);
        var m = parseInt((audio.currentTime)/60) %60;
        // Add 0 if < 10
        if(s < 10){
            s = '0'+s;
        }
        $('#duration').html(m + ':' + s);
        var value = 0;
        if(audio.currentTime > 0){
            value = ((100 / audio.duration) * audio.currentTime);
        }
        $('#progress').css('width',value+'%');
        });
}

// if song ended, go to next ==== BROKEN
$(audio).on('ended', function(){
    $('#next').trigger('click');
});

// click progress bar
$("#progressbar").mousedown(function(e){
    var leftOffset = e.pageX - $(this).offset().left;
    var songPercents = leftOffset / $('#progressbar').width();
 audio.currentTime = songPercents * audio.duration;
});

该函数应该在音频结束时触发“#next”上的点击事件。单击时 next 的点击事件工作正常，并且在控制台中触发工作正常，当收听 audio.on('ended') 时，它只会触发一次，并且只会在第一首歌曲上触发。

如有任何帮助，我们将不胜感激。

谢谢!

如果需要，我已在 html 中添加作为引用

<div id="audio-container">
    
    <!-- controls -->
    <div id="audio-player">
        <span class="audio-artist"></span>
        <span class="audio-title"></span>
    </div>
    <div class="clearfix">
        <div id="audio-controls">
            <div id="play-pause">
                <button id="play"></button>
                <button id="pause"></button>
            </div>
            <div id="tracker">
                <div id="progressbar">
                    <span id="progress"></span>
                </div>
            </div>
            <div id="duration"></div>
            <div id="volume-wrapper">
            <div id="speaker-icon"></div>
            <div id="volume-div">
                <input id="volume" type="range" min="0" max="100" value="100">
            </div>
            </div>
        </div>
    </div>
    <div id="audio-buttons">
        <a id="prev">«</a>
        <a id="next">»</a>
    </div>
    <!-- end controls -->
    
    <!-- input audio tracks here -->
    <div class="clearfix">
        <ul id="playlist">
            <li song="Dystopia" artist="Tesseract">
                <div class="track-no">01.</div>
                <div class="track-name">Tesseract - Dystopia</div>
                <div class="track-len">6:53</div>
            </li>
            <li song="Messenger" artist="Tesseract">
                <div class="track-no">02.</div>
                <div class="track-name">Tesseract - Messenger</div>
                <div class="track-len">3:34</div>    
            </li>
            <li song="Tourniquet" artist="Tesseract">
                <div class="track-no">03.</div>
                <div class="track-name">Tesseract - Tourniquet</div>
                <div class="track-len">5:57</div>
            </li>
        </ul>
    </div>
    <!-- end input -->
    
</div>

Answer 1

将 ended 事件监听器移动到 initAudio() 函数中。这应该可以解决问题。

var audio;

//hide pause button
$('#pause').hide();

//initialize first song
initAudio($('#playlist li:first-child'));

function initAudio(element){
    var song = element.attr('song');
    var artist = element.attr('artist');
    
    // Create Audio Object
    audio = new Audio('music/'+ song + '.mp3');
    
    // If no song loaded, show 0:00
    if(!audio.currentTime){
        $('#duration').html('0:00');
    }
    // otherwise get duration and show
    showDuration();
    
    // Get artist and song title
    $('#audio-player .audio-title').text('- ' + song);
    $('#audio-player .audio-artist').text(artist);
    
    $('#playlist li').removeClass('active-audio');
    element.addClass('active-audio');
  
  // if song ended, go to next ==== BROKEN
  $(audio).on('ended', function(){
      $('#next').trigger('click');
  });

}

// click playlist song
$('#playlist li').click(function(){
  audio.pause();
  initAudio($(this));
  audio.play();
  showDuration();
  $('#play').hide();
  $('#pause').show();
});

// play button
$('#play').click(function (){
    audio.play();
    $('#play').hide();
    $('#pause').show();
    $('#duration').fadeIn(400);
    showDuration();
});
// pause button
$('#pause').click(function (){
    audio.pause();
    $('#pause').hide();
    $('#play').show();
    $('#duration').fadeIn(400);
    showDuration();
});

// Next button
$('#next').click(function(){
    audio.pause();
    var next = $('#playlist li.active-audio').next();
    if(next.length == 0){
        next = $('#playlist li:first-child');
    }
    initAudio(next);
    audio.play();
    showDuration();
    if($('#play').is(':visible')){
        $('#play').hide();
        $('#pause').show();
    }
});

// Prev button
$('#prev').click(function(){
    audio.pause();
    var prev = $('#playlist li.active-audio').prev();
    if(prev.length == 0){
        prev = $('#playlist li:last-child');
    }
    initAudio(prev);
    audio.play();
    showDuration();
    if($('#play').is(':visible')){
        $('#play').hide();
        $('#pause').show();
    }
});

// Volume Control
$('#volume').change(function(){
    audio.volume = parseFloat(this.value / 100);
});

// Time Duration
function showDuration(){
    $(audio).on('timeupdate', function(){
        //get hours $ mins
        var s = parseInt(audio.currentTime % 60);
        var m = parseInt((audio.currentTime)/60) %60;
        // Add 0 if < 10
        if(s < 10){
            s = '0'+s;
        }
        $('#duration').html(m + ':' + s);
        var value = 0;
        if(audio.currentTime > 0){
            value = ((100 / audio.duration) * audio.currentTime);
        }
        $('#progress').css('width',value+'%');
        });
}


// click progress bar
$("#progressbar").mousedown(function(e){
    var leftOffset = e.pageX - $(this).offset().left;
    var songPercents = leftOffset / $('#progressbar').width();
 audio.currentTime = songPercents * audio.duration;
});