歌曲结束后如何让音频播放器播放下一首歌曲？

Posted 2023-02-22

技术标签:

【中文标题】歌曲结束后如何让音频播放器播放下一首歌曲？【英文标题】：How do i make auido player play the next song after song ended? 【发布时间】：2021-01-31 21:33:52 【问题描述】：

我试图在这个音频播放器中实现自动播放功能，但我无法让它工作，我已经尝试了很多年，我觉得我想放弃。任何帮助都会有所帮助。我对学习 javascript 还是很陌生，希望能在这里找到答案。我以某种方式让它工作了一次，但后来我忘了实际保存代码，一切都消失了，现在我质疑我的生活选择


    var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl, albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'), sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'), sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"),  i = playPauseButton.find('i'), tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, tFlag = false, albums = ['Anthem','Bedrin','Media','Project','La Vincenza','Flamenco'], trackNames = ['Mohammed - Mo3','Mohammed - Mo3','Mohammed - Mo3','Mohammed - Mo3','Mohammed - Mo3','Mohammed - Mo3'], albumArtworks = ['_1','_2','_3','_4','_5','_6'], trackUrl = ['http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Anthem.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Bedrin.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Media.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Project.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/La_Vincenza.mp3','http://elevarbetensys.se/SY20/Group_3/Home/music/mp3/Flamenco.mp3'], playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;

    function playPause()
    
        setTimeout(function()
        
            if(audio.paused)
            
                playerTrack.addClass('active');
                albumArt.addClass('active');
                checkBuffering();
                i.attr('class','fas fa-pause');
                audio.play();
            
            else
            
                playerTrack.removeClass('active');
                albumArt.removeClass('active');
                clearInterval(buffInterval);
                albumArt.removeClass('buffering');
                i.attr('class','fas fa-play');
                audio.pause();
            
        ,300);
    

        
    function showHover(event)
    
        seekBarPos = sArea.offset(); 
        seekT = event.clientX - seekBarPos.left;
        seekLoc = audio.duration * (seekT / sArea.outerWidth());
        
        sHover.width(seekT);
        
        cM = seekLoc / 60;
        
        ctMinutes = Math.floor(cM);
        ctSeconds = Math.floor(seekLoc - ctMinutes * 60);
        
        if( (ctMinutes < 0) || (ctSeconds < 0) )
            return;
        
        if( (ctMinutes < 0) || (ctSeconds < 0) )
            return;
        
        if(ctMinutes < 10)
            ctMinutes = '0'+ctMinutes;
        if(ctSeconds < 10)
            ctSeconds = '0'+ctSeconds;
        
        if( isNaN(ctMinutes) || isNaN(ctSeconds) )
            insTime.text('--:--');
        else
            insTime.text(ctMinutes+':'+ctSeconds);
            
        insTime.css('left':seekT,'margin-left':'-21px').fadeIn(0);
        
    

    function hideHover()
    
        sHover.width(0);
        insTime.text('00:00').css('left':'0px','margin-left':'0px').fadeOut(0);       
    
    
    function playFromClickedPos()
    
        audio.currentTime = seekLoc;
        seekBar.width(seekT);
        hideHover();
    

    function updateCurrTime()
    
        nTime = new Date();
        nTime = nTime.getTime();

        if( !tFlag )
        
            tFlag = true;
            trackTime.addClass('active');
        

        curMinutes = Math.floor(audio.currentTime / 60);
        curSeconds = Math.floor(audio.currentTime - curMinutes * 60);
        
        durMinutes = Math.floor(audio.duration / 60);
        durSeconds = Math.floor(audio.duration - durMinutes * 60);
        
        playProgress = (audio.currentTime / audio.duration) * 100;
        
        if(curMinutes < 10)
            curMinutes = '0'+curMinutes;
        if(curSeconds < 10)
            curSeconds = '0'+curSeconds;
        
        if(durMinutes < 10)
            durMinutes = '0'+durMinutes;
        if(durSeconds < 10)
            durSeconds = '0'+durSeconds;
        
        if( isNaN(curMinutes) || isNaN(curSeconds) )
            tProgress.text('00:00');
        else
            tProgress.text(curMinutes+':'+curSeconds);
        
        if( isNaN(durMinutes) || isNaN(durSeconds) )
            tTime.text('00:00');
        else
            tTime.text(durMinutes+':'+durSeconds);
        
        if( isNaN(curMinutes) || isNaN(curSeconds) || isNaN(durMinutes) || isNaN(durSeconds) )
            trackTime.removeClass('active');
        else
            trackTime.addClass('active');

        
        seekBar.width(playProgress+'%');
        
        if( playProgress == 100 )
        
            i.attr('class','fa fa-play');
            seekBar.width(0);
            tProgress.text('00:00');
            albumArt.removeClass('buffering').removeClass('active');
            clearInterval(buffInterval);
        
    
    
    function checkBuffering()
    
        clearInterval(buffInterval);
        buffInterval = setInterval(function()
         
            if( (nTime == 0) || (bTime - nTime) > 1000  )
                albumArt.addClass('buffering');
            else
                albumArt.removeClass('buffering');

            bTime = new Date();
            bTime = bTime.getTime();

        ,100);
    

    function selectTrack(flag)
    
        if( flag == 0 || flag == 1 )
            ++currIndex;
        else
            --currIndex;

        if( (currIndex > -1) && (currIndex < albumArtworks.length) )
        
            if( flag == 0 )
                i.attr('class','fa fa-play');
            else
            
                albumArt.removeClass('buffering');
                i.attr('class','fa fa-pause');
            

            seekBar.width(0);
            trackTime.removeClass('active');
            tProgress.text('00:00');
            tTime.text('00:00');

            currAlbum = albums[currIndex];
            currTrackName = trackNames[currIndex];
            currArtwork = albumArtworks[currIndex];

            audio.src = trackUrl[currIndex];
            
            nTime = 0;
            bTime = new Date();
            bTime = bTime.getTime();

            if(flag != 0)
            
                audio.play();
                playerTrack.addClass('active');
                albumArt.addClass('active');
            
                clearInterval(buffInterval);
                checkBuffering();
            

            albumName.text(currAlbum);
            trackName.text(currTrackName);
            albumArt.find('img.active').removeClass('active');
            $('#'+currArtwork).addClass('active');
            
            bgArtworkUrl = $('#'+currArtwork).attr('src');

            bgArtwork.css('background-image':'url('+bgArtworkUrl+')');
        
        else
        
            if( flag == 0 || flag == 1 )
                --currIndex;
            else
                ++currIndex;
        
    

    function initPlayer()
       
        audio = new Audio();

        selectTrack(0);
        
        audio.loop = false;
        
        playPauseButton.on('click',playPause);
        
        sArea.mousemove(function(event) showHover(event); );
        
        sArea.mouseout(hideHover);
        
        sArea.on('click',playFromClickedPos);
        
        $(audio).on('timeupdate',updateCurrTime);

        playPreviousTrackButton.on('click',function() selectTrack(-1); );
        playNextTrackButton.on('click',function() selectTrack(1););
    
    
    initPlayer();
);```

【问题讨论】：

您可以进行这样的搜索。音频播放器代码笔。会有一堆不同的音频播放器及其代码，其中一个可能会有所帮助。我以前做过，但我找不到任何东西这可能会有所帮助。 w3schools.com/jsref/event_onended.asp 如果没有，我真的很抱歉遗憾的是我无法弄清楚：/ 【参考方案1】：

好吧，我终于有答案了。它只有两个音频一个接一个地播放，您可以继续添加更多。代码如下。

<!DOCTYPE html>
<html>
<body>

<audio id = "id" onended = "myFunction()">
<source src = "https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-41945/zapsplat_bells_church_bell_ring_12_ext_med_close_43634.mp3?_=1">

</audio>
<audio id = "audio">
<source src = "https://www.zapsplat.com/wp-content/uploads/2015/sound-effects-audeption/audeption_church_bell_with_street_and_some_birds_010.mp3?_=2">
</audio>

<p>Click the buttons to play or pause the audio.</p>

<button onclick="playAudio()" type="button">Play Audio</button>


<script>
var x = document.getElementById("id"); 
var z = document.getElementById("audio")

function playAudio()  
  x.play(); 
 

function myFunction()  
  z.play(); 
 
</script>

</body>
</html>

很抱歉音频太长了。

【讨论】：

您可以通过两者之间的小间隙判断一个音频在哪里结束，另一个在哪里播放。好的，我要试试这个，谢谢，希望我能做到，呵呵它是否有效。应该是因为我测试过。

以上是关于歌曲结束后如何让音频播放器播放下一首歌曲？的主要内容，如果未能解决你的问题，请参考以下文章

如何让我的两个音频播放器同时播放两首不同的歌曲？

当前播放完成后可以使用啥功能继续播放音频

我制作了一个播放音频文件的播放器。我希望播放器在完成一首歌曲后播放一首歌曲。寻求帮助以解决此问题

如何统一播放音频

Yii2 - Gridview 播放下一首歌曲

如何使用 PlaySound 同时执行其他功能？