javascript - 如何删除音频类别并来回切换？

Question

我正在尝试创建一个按钮，用户可以将歌曲添加到播放列表。到目前为止我有这个

$(document).ready(function(){
$(".toggle_container").hide(); 
$("button.reveal").click(function(){
    $(this).toggleClass("active").next().slideToggle("fast");

    if ($.trim($(this).text()) === 'Add to Playlist') {
        $(this).text('Remove from playlist');
    } else {
        $(this).text('Add to Playlist');        
    }

    return false; 
});
 $("a[href='" + window.location.hash + "']").parent(".reveal").click();
});

作为我的java脚本代码，它运行良好，尽管它所做的只是添加div或删除div。当您单击 div 时，它会播放歌曲。问题在于，无论 div 是否显示，歌曲都会播放。我只想在 div 显示时播放歌曲。我尝试将音频链接放入 div 中，但没有成功。我正在考虑添加一些像这样的代码

$('source#song1' + this.id).parent().remove();

但我真的不确定。这是完整的fiddle .

编辑

我的代码工作正常，尽管我只想在单击“添加到播放列表”按钮时播放音频。我得到的答案是在单击删除音频时删除音频，尽管这只是我想要的。如果你去这个fiddle转到第一首歌曲的末尾，您会发现第二首歌曲自动播放。我只希望在单击“添加到播放列表”按钮时自动播放第二首歌曲。

Answer 1

问题出在 audioPlayer() 开头的以下内容:

$("#audioPlayer")[0].src = $("#playlist li a")[0];
$("#audioPlayer")[0].play();

您将在发生任何事情之前启动播放器。

您的 audioPlayer() 方法应如下所示:

  function audioPlayer() {
    var currentSong = 0;
    $("#playlist li a").click(function(e) {
      e.preventDefault();
      $("#audioPlayer")[0].src = this;
      $("#audioPlayer")[0].play();
      $("#playlist li").removeClass("current-song");
      currentSong = $(this).parent().index();
      $(this).parent().addClass("current-song");
    });
    $("#audioPlayer")[0].addEventListener("ended", function() {
      currentSong++;
      if (currentSong == $("#playlist li a").length)
        currentSong = 0;
      $("#playlist li").removeClass("current-song");
      $("#playlist li:eq(" + currentSong + ")").addClass("current-song");
      $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
      $("#audioPlayer")[0].play();
    });
  }

这将解决您一开始播放歌曲的问题。接下来，要在隐藏 div 时停止播放歌曲，您可以在按钮单击事件处理程序中添加以下内容:

if ($.trim($(this).text()) === 'Add to Playlist') {
  $(this).text('Remove from playlist');
} else {
  $("#audioPlayer")[0].pause();
  $("#audioPlayer")[0].currentTime = 0;
  $(this).text('Add to Playlist');
}

最终结果应该是:

$(document).ready(function() {
  $(".toggle_container").hide();
  $("button.reveal").click(function() {
    $(this).toggleClass("active").next().slideToggle("fast");

    if ($.trim($(this).text()) === 'Add to Playlist') {
      $(this).text('Remove from playlist');
    } else {
      $("#audioPlayer")[0].pause();
      $("#audioPlayer")[0].currentTime = 0;
      $(this).text('Add to Playlist');
    }

    return false;
  });
  $("a[href='" + window.location.hash + "']").parent(".reveal").click();
});

#searchbar {
  padding: 15px;
  border-radius: 10px;
  width: 80%
}

#playlist .current-song a {
  color: #7777FE;
  border-color: #008ae6;
}

#playlist {
  list-style: none;
}

#playlist li a {
  text-decoration: none;
  color: #ca0ce0;
}


#playlist {
  font-size: 14.5px;
  list-style: none;
  margin-left: 40px;
  color: blue;
}

.animals {
  display: list-item;
  margin-bottom: 5px;

}

#background {
  border: solid;
  width: 100%;
  height: 75px;
  margin-top: 5px;
  margin-left: 5px;
}

#background2 {
  border: solid;
  width: 98%;
  height: 75px;
  margin-top: 5px;
  margin-left: 5px;
}

#background3 {
  border: solid;
  width: 100%;
  height: 75px;
  margin-top: 5px;
  margin-left: 0px;
}


#playlist.current-song {
  border-color: #008ae6;
}

.image {
  width: 100px;
  float: left
}

#song {
  margin-left: 13px;
  margin-top: 9px;
  float: left;
}

.artist {
  text-align: center;
  margin-right: 20px;
  font-size: 12px;
  margin-top: 14px;
}

.image3 {
  width: 100px;
  float: left;
  height: 75px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <audio id="audioPlayer" preload="true">
    </audio>
    <ul id="playlist">
      <button class="reveal">Add to Playlist </button>
      <div class="toggle_container">
        <div class="block">
          <li class="current-song"><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3">
              <div id="background2"><img src="https://images.unsplash.com/photo-1577044685231-70e99274404c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80Cat" class="image" />
                <h4 id="song">Tummy Why</h4>
                <h5 class="artist">Revy Conover</h5>
              </div>
            </a></li>
        </div>
      </div>
    </ul>
    <script>
      audioPlayer();

      function audioPlayer() {
        var currentSong = 0;
        $("#playlist li a").click(function(e) {
          e.preventDefault();
          $("#audioPlayer")[0].src = this;
          $("#audioPlayer")[0].play();
          $("#playlist li").removeClass("current-song");
          currentSong = $(this).parent().index();
          $(this).parent().addClass("current-song");
        });
        $("#audioPlayer")[0].addEventListener("ended", function() {
          currentSong++;
          if (currentSong == $("#playlist li a").length)
            currentSong = 0;
          $("#playlist li").removeClass("current-song");
          $("#playlist li:eq(" + currentSong + ")").addClass("current-song");
          $("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
          $("#audioPlayer")[0].play();
        });
      }

    </script>

注意:我已经删除了音频上的 ontimeupdate 事件，因为您没有提供它的代码，因此它会抛出错误。