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

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事件，因为您没有提供代码，因此它会引发错误。