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

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();

但我真的不确定。 这是完整的小提琴。

编辑

我的代码工作正常，尽管我只希望在单击添加到播放列表按钮时播放音频。 我得到的答案是在单击删除音频时删除音频，尽管这只是我想要的。 如果您转到此小提琴并转到第一首歌曲的结尾，您会注意到第二首歌曲会自动播放。 如果单击添加到播放列表按钮，我只希望第二首歌曲自动播放。

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事件，因为你没有提供它的代码，所以它会抛出错误。