How to remove class of audio and toggle back and forth?

Question

I am trying to create a button that users can add a song to playlist. So far I have this

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

as my java script code and it works well although all it does is add the div or remove the div. When you click on the div it plays the song. The problem is that the song plays either way weather the div is showing or not. I only want the song to play if the div is showing. I have tried putting the audio link inside the div which did not work. I was thinking adding some line of code like this

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

but I'm really not sure. Here is the full fiddle .

EDIT

I have the code working fine although I only want the audio to play if the add to playlist button is clicked. The answer I got was to remove the audio when the remove audio was clicked although that is only have of what I wanted. If you go to this fiddle and go to the end of the first song you will notice that the second song automatically plays. I only want the second song to automatically play if the add to playlist button is clicked.

Answer 1

The problem is with the following in the beginning of audioPlayer() :

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

You are starting the player before anything happens.

Your audioPlayer() method should look like this:

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

This will solve your problem of the song playing in the beginning. Next, to stop the song when you hide the div, you can add the following in your button click event handler:

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

The end result should be:

 $(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>

Note: I have removed the ontimeupdate event on the audio because you have not supplied the code for it so it's throwing errors.