如何刪除音頻類並來回切換？

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事件，因為你沒有提供它的代碼，所以它會拋出錯誤。