Question

我是JS的新手，我被要求创建一个可以用完单个HTML文件的音乐播放器。音乐是在谷歌驱动器上托管的，因为它必须能够在假期/季节等方面进行更改

经过大量拼凑代码和测试和故障排除后，我设法让播放列表运行和循环非常一致，但我遇到了播放列表随机冻结一首歌的问题。它通常在它至少循环一次后，我可以收集的唯一解释是连接丢失或由于某种原因脚本无法连接到音乐文件。

有没有办法检测歌曲是否无法播放，通过将localstorage.songposition递增1并播放下一首歌来跳过它？您可以看到我尝试使用try和catch块，但我猜它不会在JS中生成错误，因为这不起作用。

在下面的代码中，我删除了指向我们文件的链接，但它应该播放第一个链接就好了，第二个链接被故意打破，它应该检测到它无法播放＃2并跳到第三个。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Audio Player</title>
    <style>
        body { background-color: rgba(0,0,0,0); }
        #playlist{
            list-style: none;
        }
        #playlist li a{
            color:#322f31;
            text-decoration: none;
            -webkit-text-stroke: 1px #232022;
            font-size: 28px;
            font-weight:bold;
        }
        #playlist .current-song a{
            color:#ee273c;
            font-weight:bold;
            -webkit-text-stroke: 1.5px #9a1723;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <!-- -->
    <!--Audio Player--> 
    <audio src="" controls id="audioPlayer" hidden> <!---->
        Sorry, your browser doesn't support html5!
    </audio>
    <!-- List of songs -->
    <ul id="playlist"> 
        <!--Set 1, Song 1 --><li class="current-song"><a href="Link_here">It Goes Like This</a></li>
        <!--Set 2, Song 1 --><li><a href="Broken LInk">Testing Link</a></li>
        <!--Set 3, Song 1 --><li><a href="Link_here">Destination Unknown</a></li>

    </ul>

    <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
    <script language="javascript">

        function audioPlayer(){
            var currentSong = 0;
            try{
                //If the locally stored position doesn't exist yet, set it to currentSong, otherwise increment it by one
                if (localStorage.songPosition === "NaN"){
                    localStorage.songPosition = currentSong
                }
                else{
                    localStorage.songPosition++
                }
                //If the stored song position is greater than the length of the song index, reset it.
                if(localStorage.songPosition > $("#playlist li a").length-1){
                        localStorage.songPosition = 0;
                        currentSong = 0;
                }
                //Play the song at the locally stored position
                $("#audioPlayer")[0].src = $("#playlist li a")[localStorage.songPosition];
                $("#audioPlayer")[0].play();
                //Removes the class from the last song and adds the current-song class to the playing song to color it blue
                $("#playlist li").removeClass("current-song");
                $("#playlist li:eq("+localStorage.songPosition+")").addClass("current-song");
                //Allows you to click titles to change songs, this is mostly for an actual web page and not necessary for an automatic system.
                $("#playlist li a").click(function(e){
                   e.preventDefault(); 
                   //Play next song
                   $("#audioPlayer")[0].src = this;
                   $("#audioPlayer")[0].play();
                   //Move current-song class to next song
                   $("#playlist li").removeClass("current-song");
                    currentSong = $(localStorage.songPosition).parent().index();
                    $(this).parent().addClass("current-song");
                });
                //Check for the end of the current song, increment the current song counter and play the next one.
                $("#audioPlayer")[0].addEventListener("ended", function(){
                   currentSong++;
                   localStorage.songPosition = currentSong;
                    if(localStorage.songPosition > $("#playlist li a").length-1){
                        currentSong = 0;
                        localStorage.songPosition = 0;
                    }
                    //Move the current-song class to the next song
                    $("#playlist li").removeClass("current-song");
                    $("#playlist li:eq("+currentSong+")").addClass("current-song");
                    //Play next song
                    $("#audioPlayer")[0].src = $("#playlist li a")[localStorage.songPosition].href;
                    $("#audioPlayer")[0].play();                
                });
            }
            catch(err) {
                alert("catch")
                localStorage.songPosition++
                $("#audioPlayer")[0].src = $("#playlist li a")[localStorage.songPosition];
                $("#audioPlayer")[0].play();
            }
        }

    </script>
    <script>
        // loads the audio player
        audioPlayer();
    </script>
</body>
</html>

Answer 1

这就是我在 javascript 中所做的只是将

HTML / JS音乐播放列表脚本

1 个答案: