求助：网页音频播放器无法播放选中专辑（附代码）

我想做一个能在外出时使用的网页音乐播放器。最开始用iframe展示音乐目录列表，想把iframe内点击的链接信息传递给JavaScript音频播放器，但尝试用iframeDoc.addEventListener和iframeDoc.attachEvent都没效果，也知道可以用postMessage API但不知道具体怎么用，同时对JQuery和DOM不太熟悉。

之后我调整了方案，把音乐列表放在主HTML页面，通过链接向audio_player.php传递album参数来指定要播放的专辑，但现在音频播放器无法播放选中的专辑。

音乐列表格式 #

100 Greatest One Hit Wonders 80<br>
<a href=audio_player.php?album=Music/100&nbsp;Greatest&nbsp;One&nbsp;Hit&nbsp;Wonders&nbsp;80/CD1>100 Greatest One Hit Wonders 80/CD1</a><br>
<a href=audio_player.php?album=Music/100&nbsp;Greatest&nbsp;One&nbsp;Hit&nbsp;Wonders&nbsp;80/CD2>100 Greatest One Hit Wonders 80/CD2</a><br>
<a href=audio_player.php?album=Music/100&nbsp;Greatest&nbsp;One&nbsp;Hit&nbsp;Wonders&nbsp;80/CD3>100 Greatest One Hit Wonders 80/CD3</a><br>
<a href=audio_player.php?album=Music/100&nbsp;Greatest&nbsp;One&nbsp;Hit&nbsp;Wonders&nbsp;80/CD4>100 Greatest One Hit Wonders 80/CD4</a><br>
101 Pirate Radio Hits<br>
<a href=audio_player.php?album=Music/101&nbsp;Pirate&nbsp;Radio&nbsp;Hits/CD1>101 Pirate Radio Hits/CD1</a><br>
<a href=audio_player.php?album=Music/101&nbsp;Pirate&nbsp;Radio&nbsp;Hits/CD2>101 Pirate Radio Hits/CD2</a><br>
<a href=audio_player.php?album=Music/101&nbsp;Pirate&nbsp;Radio&nbsp;Hits/CD3>101 Pirate Radio Hits/CD3</a><br>
<a href=audio_player.php?album=Music/101&nbsp;Pirate&nbsp;Radio&nbsp;Hits/CD4>101 Pirate Radio Hits/CD4</a><br>
<a href=audio_player.php?album=Music/2001&nbsp;A&nbsp;Space&nbsp;Odyssey>2001 A Space Odyssey</a><br>
7 Superb Albums of US Psychedelic Rock 1967-72<br>

audio_player.php代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Audio Player</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="audio.css">
    <script src="audio.js"></script>
  </head>
  <body><div id="demo">
    <!-- (A) AUDIO TAG -->
    <audio id="demoAudio" controls></audio>

    <!-- (B) PLAYLIST -->
    <div id="demoList">
<?php
   $_GET["album"];
#   echo $_GET["album"];
   $album_to_play = $_GET["album"];

#   $music_dir = "Music/Fleetwood Mac Discography/1969 - Fleetwood Mac - English Rose";
   $music_dir = "$album_to_play";
  // (B1) GET ALL SONGS
#      $songs = glob("$music_dir/*.{mp3,webm,ogg,wav}", GLOB_BRACE);
      $songs = glob("$music_dir/*.{mp3,webm,flac,m4a,ogg,wav}", GLOB_BRACE);

      // (B2) OUTPUT SONGS IN <DIV>
      if (is_array($songs)) { foreach ($songs as $k=>$s) {
        $name = basename($s);
        printf("<div data-src='%s' class='song'>%s</div>", rawurlencode($name), $name);
  }} else { echo "No songs found!"; }
    ?></div>
  </div></body>
</html>

audio.js代码 #

var aud = {
  // (A) INITIALIZE PLAYER
  player : null,   // html <audio> element
  playlist : null, // html playlist
  now : 0,         // current song
  init : () => {
    // (A1) GET HTML ELEMENTS
    aud.player = document.getElementById("demoAudio");
    aud.playlist = document.querySelectorAll("#demoList .song");

    // (A2) LOOP THROUGH ALL THE SONGS, CLICK TO PLAY
    for (let i=0; i<aud.playlist.length; i++) {
      aud.playlist[i].onclick = () => aud.play(i);
    }

    // (A3) AUTO PLAY WHEN SUFFICIENTLY LOADED
    aud.player.oncanplay = aud.player.play;

    // (A4) AUTOPLAY NEXT SONG IN PLAYLIST WHEN CURRENT SONG ENDS
    aud.player.onended = () => {
      aud.now++;
      if (aud.now>=aud.playlist.length) { aud.now = 0; }
      aud.play(aud.now);
    };
  },

  // (B) PLAY SELECTED SONG
  play : id => {
    // (B1) UPDATE AUDIO SRC
    aud.now = id;
    aud.player.src = "Music/101 Pirate Radio Hits/CD1/" + aud.playlist[id].dataset.src;

    // (B2) A LITTLE BIT OF COSMETIC
    for (let i=0; i<aud.playlist.length; i++) {
      if (i==id) { aud.playlist[i].classList.add("now"); }
      else { aud.playlist[i].classList.remove("now"); }
    }
  }
};
window.addEventListener("DOMContentLoaded", aud.init);

我已经调试了一整天还是没法解决问题，恳请各位提供帮助，谢谢！

内容的提问来源于stack exchange，提问作者David Fenlon