使用多个音频播放器

Question

我试图让所有音频播放器，按下播放按钮时播放歌曲。但我一直得到错误音频无法读取属性'attr'为null。我使用for循环从数据库中获取数据，下一步是使用音频播放器中的数据。

$( document ).ready(function() {
    let isPlaying = false;
    $('.player-button').click(function() {
        let song = document.querySelector(".player").attr('data-id');
        let button = document.querySelector(".toggle");
        $('.toggle').attr('data-id');
        if (isPlaying == false){
            song.play();
            isPlaying = true;
            button.innerHTML ='<i class="fa fa-pause fa-3x" aria-hidden="true"></i>';
        } else {
            song.pause();
            isPlaying = false;
            button.innerHTML ='<i class="fa fa-play fa-3x" aria-hidden="true"></i>';
        }
        console.log($(this));
    });
});

<div class="MusicItem">

  <img src="<?php echo $arrayMusic[0][$i][" image "] ?>">

  <div class="music-player">
<button class="player-button toggle" title="togglePlay"><i class="fa fa-play fa-3x" aria-hidden="true" data id="<?php echo$i?>"></i></button>

<div class="MusicText">
  <h2>
    <?php echo $arrayMusic[0][$i]["title"] ?>
  </h2>
  <p>
    <?php echo $arrayMusic[0][$i]["theYear"] ?>
  </p>
</div>

<audio class="player<?php echo$i?>">
                            <source src="<?php echo $arrayMusic[0][$i]["track"] ?>" type="audio/mpeg">
                        </audio>

  </div>
  <div class="MusicButtons">
<button class="MusicInfo">Info</button>
<button class="MusicBuy"><a href="https://itunes.apple.com/us/artist/malvae/id986932690" target="_blank">Buy</a></button>
  </div>
</div>