HTML/JS 音乐播放列表脚本答案

【问题标题】：HTML/JS music playlist scriptHTML/JS 音乐播放列表脚本
【发布时间】：2018-01-19 20:43:27
【问题描述】：

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

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

有没有办法检测歌曲是否无法播放，通过将 localstorage.songposition 加一来跳过它并播放下一首？你可以看到我正在尝试使用 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>

【问题讨论】：

尝试使用现成的库，例如github.com/MoePlayer/APlayer
问题是我不能修改硬件上的任何东西，这只是一个通过另一个程序运行的 HTML 脚本。它基本上是远程管理的 powerpoint，我可以上传一个 HTML 脚本来运行，但我不能安装任何程序或文件层次结构。

标签： javascript html audio-player

【解决方案1】：

这就是我在 javascript 中所做的，只是在它周围加上

document.onkeydown = keydown;

var paused = false;
function keydown(evt) {
  if (!evt) evt = event;
  if (evt.keyCode == 39) {
    // right arrow key
    evt.preventDefault();
    x.currentTime += 10;
  }
  if (evt.keyCode == 37) {
    //left arrow key
    evt.preventDefault();
    x.currentTime -= 10;
  }
  if (evt.keyCode == 119) {
    //enter
    evt.preventDefault();
    x.currentTime = x.duration;
  }
  if (evt.keyCode == 32) {
    //space
    evt.preventDefault();
    if(paused == false){
      x.pause();
      paused = true;
    }
    else{
      x.play();
      paused = false;
    }
  }
}
  var songList = [
   //links to songs
   //song1,
   //song2
];

          function randomChoice(choices) {
            var index = Math.floor(Math.random() * choices.length);
            return choices[index];
          }
          function error(){
             play()
          }
            function playAudio() {
            try{x.pause();}catch(err){
              //pass}finally{
              x = randomChoice(songList);
            x = new Audio(x);
            x.id = 'x';
            x.play();
            //autoplay
            x.addEventListener("ended", function playNextS() {playAudio()})
            }};
          function pauseAudio() {
              x.pause();
          }

然后放

要么

但如果你愿意，你可以做类似的事情

var 当前 = 0; setInterval(function(){oldTime = current; current = x.currentTime; if(currentTime == oldTime && x.paused == false){play()}elif(x.nodeType != 1){play}, 10000)

每 x 秒检查一次歌曲是否仍在播放

【讨论】：