jquery는 선택기 이름 대신 값을 넣습니다.

안녕하세요 이것은 내가 일반적으로 이름을 얻기 위해 요소를 선택하는 방법입니다.

<div id="song-name"></div>

<a href="#" id="play">Play</a>
<a href="#" id="pause">Pause</a>
<a href="#" id="skip">next</a>
<a href="#" id="previous">previous</a>
<br><br>

  <audio  id="1"   name="song1" class="audio-player" src="music.mp3"></audio>
   <audio id="2" name="song2" class="audio-player" src="music2.mp3"></audio>



  var songName=$("1").attr("name");

하지만 난 이런 게 필요해

   var id=1;
        songName=$("id").attr("name");

그것에 대한 쓰기 구문은 무엇입니까?

현재 음악 재생 이름을 표시하는 스크립트가 있기 때문에 필요하지만 다음 곡이 재생 되더라도 첫 번째 곡 이름 만 표시됩니다.

   <script>
    $(document).ready(function() {
    var x = $(".audio-player").length;
    var z = 0;

    var songName=$("audio").attr("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 >= x) z = 0;


        $(".audio-player")[z].play();

        $(".audio-player")[z].currentTime = 0;
        $("#song-name").text(songName);
         $("#song-name").show();


    })




    $("#previous").click(function(){
        $(".audio-player")[z].pause();
        z=z-1;
        if (z >= x) z = 0;
        $(".audio-player")[z].play();
        $(".audio-player")[z].currentTime = 0;
        $("#song-name").text(songName);
    })
    });
    </Script>

그래서 내가 할 일은 #skip 함수를 편집하는 것입니다.

       $("#skip").click(function(){

            $(".audio-player")[z].pause();
    //where i edit       
    var  id=id+1;
        var songName=$("#id").attr("name");
//finish edit

            z++;
            if (z >= x) z = 0;


            $(".audio-player")[z].play();

            $(".audio-player")[z].currentTime = 0;
            $("#song-name").text(songName);
             $("#song-name").show();


        })