title: display the song name jquery
body: <p>i have a list of songs i play in my website,i want to be able to display the current song name playing ,i have this code which have play ,pause,next,back,which works fine,but i need to edit it to display the song name</p>
  
  <pre><code>    &lt;body&gt;
                  &lt;a class="btn" href="#" id="play" style="background-color:black"&gt;Play &lt;/a&gt; 
  
                  &lt;a  class="btn"  href="#"  style="background-color:black" id="pause"&gt;Pause&lt;/a&gt;
                  &lt;br&gt;
  
                  &lt;a  class="btn"  href="#" style="background-color:black" id="skip"&gt;Next &lt;/a&gt; 
  
                  &lt;a  class="btn"  href="#"  style="background-color:black" id="previous"&gt;Back&lt;/a&gt;
  
   &lt;audio    preload="metadata" tabindex="0" controls autoplay type="audio/mpeg"   class="audio-player" src="dz.mp3"&gt;&lt;/audio&gt;
  
            &lt;audio  class="audio-player" src="song2.mp3"&gt;&lt;/audio&gt;
  
          &lt;audio  class="audio-player" src="song3.mp3"&gt;&lt;/audio&gt;
  
              &lt;body&gt;
  </code></pre>
  
  <p>and this is my script</p>
  
  <pre><code>&lt;script&gt;
  var x = $(".audio-player").length;
  var z = 0;
  var songName = $("audio[name]")
  
  $("#play").click(function(){
      $(".audio-player")[z].play();
      $("#song-name").text(songName);
      $("#song-name").show();
  })
  $("#pause").click(function(){
      $(".audio-player")[z].pause();
      $("#song-name").hide();
  })
  $("#skip").click(function(){
      $(".audio-player")[z].pause();
      z++;
      if (z &gt;= x) z = 0;
      $(".audio-player")[z].play();
      $(".audio-player")[z].currentTime = 0;
      $("#song-name").text(songName);
  })
  
  
  
  
  $("#previous").click(function(){
      $(".audio-player")[z].pause();
      z=z-1;
      if (z &gt;= x) z = 0;
      $(".audio-player")[z].play();
      $(".audio-player")[z].currentTime = 0;
      $("#song-name").text(songName);
  })
  &lt;/Script&gt;
  </code></pre>