title: Click on the playlist link to start and stop music at audioplayer
body: <p>That's my first question here, and I'm a newbie, so the solution might be obvious.</p>
  <p>I tried simple thing: a plalist, where when clicking the song link, it's starts playing. It works.</p>
  <p>What doesn't work is when clicking again the song link I wish it would stop the music playing. Unfortunately it doesn't happen. I tried <code>eventListener</code>, and simple <code>if</code> function. Unfortunately console strickes errors, which after fixing resolves in another. So basically I'm stuck running in circles.
  It might be obvious mistake (in comments I included options I tried). Any advice would be very much apreciated.</p>
  <p>Please find the project at the link and the code snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>*playlist*/
  
  audioPlayer();
  function audioPlayer() {
    var nowPlaying = 0;
  
    $("#audioPlayer")[0].src = $(".playlist li a")[0];
  
    $(".playlist li a").click(function (e) {
      e.preventDefault();
      $("#audioPlayer")[0].src = this;
      $("#audioPlayer")[0].play();
      $(".playlist li").removeClass("playing");
      nowPlaying = $(this).parent().index();
      $(this).parent().addClass("playing");
    });
  
    $("playlist li a").click(function () {
      if ("#audioPlayer".play) {
        "#audioPlayer".pause();
      }
    });
  }
  
  const tune = document.getElementsByClassName(".tune-name");
  const player = document.getElementById("#audioPlayer");
  
  function play() {
    tune.addEventListener("click", function () {
      alert("hi");
      if (player.play) {
        player.pause();
      }
    });
  }
  
  /*
  const tune = document.getElementsByClassName('.tune-name');
  const player = document.getElementById('#audioPlayer'); 
   
   function play(){
  
     tune.addEventListener('click', () =&gt; {
    
       if (player.paused) {
              player.play();
               
          }
          else{
              player.pause();
          } 
            
          });
   }
  */
  
  const rocketOne = document.getElementsByClassName(".rocketone");
  const tuneNameOne = document.getElementsByClassName(".tune-name one");
  
  function rocket() {
    tuneNameOne.addEventListener("click", function () {
      rocketOne.classList.add("rocketoneafter");
    });
  }
  
  
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta
        name="viewport"
        content="width=device-width, height=device-height, initial-scale=1"
      /&gt;
  
      &lt;script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"
      &gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="musicshop.css" /&gt;
  
      &lt;script type="text/javascript" src="musicshop.js" defer&gt;&lt;/script&gt;
  
      &lt;link rel="preconnect" href="https://fonts.gstatic.com" /&gt;
      &lt;link
        href="https://fonts.googleapis.com/css2?family=Squada+One&amp;display=swap"
        rel="stylesheet"
      /&gt;
  
      &lt;script
        src="https://kit.fontawesome.com/00d9109818.js"
        crossorigin="anonymous"
      &gt;&lt;/script&gt;
  
      &lt;title&gt;musicshop&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;!--&lt;div class="major"&gt;--&gt;
  
      &lt;!--animation--&gt;
      &lt;!--
  &lt;div class="stage"&gt;
     
   &lt;div class="traveler"&gt;--&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="rockets"&gt;
          &lt;div class="rocketone"&gt;
            &lt;div class="fin-wrap"&gt;
              &lt;div class="left-fin jeden"&gt;&lt;/div&gt;
              &lt;div class="right-fin jeden"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="body jeden"&gt;
              &lt;div class="window"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="rockettwo"&gt;
            &lt;div class="fin-wrap"&gt;
              &lt;div class="left-fin dwa"&gt;&lt;/div&gt;
              &lt;div class="right-fin dwa"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="body dwa"&gt;
              &lt;div class="window"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="rockettr"&gt;
            &lt;div class="fin-wrap"&gt;
              &lt;div class="left-fin trzy"&gt;&lt;/div&gt;
              &lt;div class="right-fin trzy"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="body trzy"&gt;
              &lt;div class="window"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="rocketfo"&gt;
            &lt;div class="fin-wrap"&gt;
              &lt;div class="left-fin czt"&gt;&lt;/div&gt;
              &lt;div class="right-fin czt"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="body czt"&gt;
              &lt;div class="window"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="rocketfv"&gt;
            &lt;div class="fin-wrap"&gt;
              &lt;div class="left-fin pt"&gt;&lt;/div&gt;
              &lt;div class="right-fin pt"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="body pt"&gt;
              &lt;div class="window"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="rocketsx"&gt;
            &lt;div class="fin-wrap"&gt;
              &lt;div class="left-fin sze"&gt;&lt;/div&gt;
              &lt;div class="right-fin sze"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="body sze"&gt;
              &lt;div class="window"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="rocketsv"&gt;
            &lt;div class="fin-wrap"&gt;
              &lt;div class="left-fin sie"&gt;&lt;/div&gt;
              &lt;div class="right-fin sie"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="body sie"&gt;
              &lt;div class="window"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--rockets--&gt;
        &lt;!--&lt;/div&gt;--&gt;&lt;!--traveler--&gt;
        &lt;!--&lt;/div&gt;--&gt;&lt;!--stage--&gt;
  
        &lt;!--end of animation--&gt;
  
        &lt;ul class="playlist"&gt;
          &lt;li class="tune"&gt;
            &lt;a class="tune-name one" href="mp3/Disco80s.mp3"&gt;DISCO '80S&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="tune"&gt;
            &lt;a class="tune-name two" href="mp3/LoFiSept.mp3"&gt;LoFi SEPT&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="tune"&gt;
            &lt;a class="tune-name tr" href="mp3/MelodieRomantic.mp3"
              &gt;MELODY ROMANTIC&lt;/a
            &gt;
          &lt;/li&gt;
  
          &lt;li class="tune"&gt;
            &lt;a class="tune-name fo" href="mp3/RetroPanKlex.mp3"&gt;RETRO PAN KLEX&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="tune"&gt;
            &lt;a class="tune-name fv" href="mp3/RomanticLoFi.mp3"&gt;ROMANTIC LoFi&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="tune"&gt;
            &lt;a class="tune-name sx" href="mp3/SessionAug.mp3"&gt;SESSION AUG&lt;/a&gt;
          &lt;/li&gt;
  
          &lt;li class="tune"&gt;
            &lt;a class="tune-name sv" href="mp3/SessionSep.mp3"&gt;SESSION SEPT&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;!--playlist--&gt;
      &lt;/div&gt;
      &lt;!--wrapper--&gt;
  
      &lt;!--&lt;/div&gt;--&gt;
      &lt;!--major--&gt;
  
      &lt;audio src="" controls id="audioPlayer"&gt;&lt;/audio&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://zjniy.csb.app/" rel="nofollow noreferrer">Code sandbox</a></p>