无法获得音频在JavaScript音板中播放（此处是新手的总称）

Question

我正在尝试为我们的D＆D课程创建一个音板，作为开始的练习。我目前正在尝试使之单击按钮时将变量“ audio”设置为该值，然后它根据是否运行来运行该函数以播放或暂停音频。我在同一文件中有JS和HTML（但是我意识到这不好）。下面是我的代码：

    <button id="play1st">Heroic Battle Music</button>
    <button id="play2nd">Military Battle Music</button>
    <button id="play3rd">Stronghold Battle Music</button>

 <!--Audio to be played -->
        <audio id="heroic" src="heroic.mp3"></audio>
        <audio id="combat_rome" src="combat_rome.mp3"></audio>
        <audio id="stronghold" src="stronghold.mp3"></audio>

        <!--JavaScript audio -->
        <script>
        function playMusic() {
        document.getElementById("play1st").addEventListener ('click', music1());
        document.getElementById("play2nd").addEventListener ('click', music2());
        document.getElementById("play3rd").addEventListener ('click', music3());
        var isPlaying = false;
        function music1() {
          var audio = new Audio("heroic.mp3");
          togglePlay();
        };
        function music2() {
          var audio = new Audio("combat_rome.mp3");
          togglePlay();
        };
        function music3() {
          var audio = new Audio("stronghold.mp3");
          togglePlay();
        };

        function togglePlay(){
        if  (isPlaying){
          pause()
        } else {
          audio.play();
        }
        };
        audio.onplaying = function () {
          isPlaying = true;
        };

        audio.onpause = function () {
          isPlaying = false;
        }};
        </script>

I'm probably missing something very basic, so any explanation would be most welcome. Thank you!