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

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

$(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中，但没有成功。我在考虑添加这样的代码行

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

但我真的不确定。这是全文

编辑

---

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

问题在于

audioPlayer（）开头的以下内容：

你在任何事情发生之前就启动了玩家

您的
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');
}

最终结果应该是：


$（文档）.ready（函数（）{
$（“.toggle_container”）.hide（）；
$（“button.reveal”）。单击（函数（）{
$（this）.toggleClass（“活动”）.next（）.slideToggle（“快速”）；
if（$.trim（$（this）.text（））===='添加到播放列表'）{
$（this）.text（'Remove from playlist'）；
}否则{
$（“#audioPlayer”）[0]。暂停（）；
$（“#audioPlayer”）[0].currentTime=0；
$（此）.text（'添加到播放列表'）；
}
返回false；
});
$（“a[href=”+window.location.hash+“']”）。父项（“.reveal”）。单击（）；
});
#搜索栏{
填充：15px；
边界半径：10px；
宽度：80%
}
#播放列表。当前歌曲a{
颜色：#7777FE；
边框颜色：#008ae6；
}
#播放列表{
列表样式：无；
}
#播放列表李a{
文字装饰：无；
颜色：#ca0ce0；
}
#播放列表{
字号：14.5px；
列表样式：无；
左边距：40px；
颜色：蓝色；
}
.动物{
显示：列表项；
边缘底部：5px；
}
#背景{
边框：实心；
宽度：100%；
高度：75px；
边缘顶部：5px；
左边距：5px；
}
#背景2{
边框：实心；
宽度：98%；
高度：75px；
边缘顶部：5px；
左边距：5px；
}
#背景3{
边框：实心；
宽度：100%；
高度：75px；
边缘顶部：5px；
左边距：0px；
}
#playlist.current-song{
边框颜色：#008ae6；
}
.形象{
宽度：100px；
浮动：左
}
#歌{
左边距：13px；
边缘顶部：9px；
浮动：左；
}
.艺术家{
文本对齐：居中；
右边距：20px；
字体大小：12px；
边缘顶部：14px；
}
.image3{
宽度：100px；
浮动：左；
高度：75px；
}



音频播放器（）；
函数audioPlayer（）{
var-currentSong=0；
$（“#播放列表LIA”）。单击（功能（e）{
e、 预防默认值（）；
$（“#audioPlayer”）[0].src=this；
$（“#audioPlayer”）[0]。播放（）；
$（“#playlist li”）.removeClass（“当前歌曲”）；
currentSong=$（this.parent（）.index（）；
$（this.parent（）.addClass（“当前歌曲”）；
});
$（“#audioPlayer”）[0]。addEventListener（“结束”，函数（）{
当前歌曲++；
如果（currentSong==$（“#播放列表a”）.length）
currentSong=0；
$（“#playlist li”）.removeClass（“当前歌曲”）；
$（“#播放列表li:eq（“+currentSong+”）.addClass（“当前歌曲”）；
$（“#audioPlayer”）[0]。src=$（“#播放列表LIA”）[currentSong]。href；
$（“#audioPlayer”）[0]。播放（）；
});
}
它在您的小提琴中工作得很好。那是你测试它的地方吗？我之前搞错了，您仍然需要调用
audioPlayer（）脚本中执行code>。如果你把它删掉了，那么把它加回去，然后在我当前的答案中做些修改。谢谢你，尽管问题仍然是当歌曲结束时我会自动播放。这意味着当一首歌结束时，下一首歌会自动播放，看起来是这样的。这意味着，尽管音频类已被删除，但它仍会自动播放。有什么办法解决这个问题吗？这听起来和你在问题中提到的问题不一样。我建议问一个新问题。如果我的回答解决了你问题中的问题，那么请接受。我接受了，尽管你能在这个问题上帮助我吗？请发表评论。今天剩下的时间我无法发表评论，你也帮了我很大的忙
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');
}