Javascript 由一个播放按钮触发的内部和外部js脚本

我已经将下面的脚本包含在一个以文本为主的页面中，它可以播放音频并切换播放按钮。我有一个外部脚本“fireScript.js”，它使用canvas元素创建了一个焰火表演，我希望它在单击播放按钮时与音频一起播放。焰火脚本在另一个页面上可以正常工作，但它会在页面打开后立即开始。在这个页面上，我想延迟脚本，直到点击播放按钮。我在搜索中发现的是将外部脚本作为头部的子脚本添加到getElementByTagName中。我尝试将另一个页面的头脚本复制到此页面的头，但它根本无法播放，即使在打开页面时也是如此。我可以在下面的脚本中添加一行代码，将fireScript.js引入到这个脚本中吗？（9个月前有人问过类似的问题（），但这似乎是一个更简单的情况，因为fireworks脚本已经在其他地方运行了。）在脚本中嵌套脚本似乎不是一个选项。似乎我应该在if块中添加一行，在else块中添加另一行，以便在音乐停止时停止焰火。任何帮助都将不胜感激。提前谢谢

<img class="playArrow" id="fanfarePlay" alt="play audio" src="../Images/playArrow.png"/>
<canvas id="canvasFireworks"></canvas>
<audio id="fanfareAudio" src="../Audio/garvey_finale.mp3" type="audio/mp3"></audio>

<script type="text/javascript">  
    var clip = document.getElementById("fanfareAudio");
    var playPause = document.getElementById("fanfarePlay");

    playPause.addEventListener("click", function() {
        if (clip.paused == true) {
            clip.play();
            playPause.src="../Images/playPause.png";
        } else {
            clip.pause();
            playPause.src="../Images/playArrow.png";
        }
    });
    clip.onended = function() {
        playPause.src="../Images/playArrow.png";
    };
</script>

var clip=document.getElementById（“fanfareAudio”）；
var playPause=document.getElementById（“fanfarePlay”）；
playPause.addEventListener（“单击”，函数（）{
如果（clip.paused==true）{
clip.play（）；
playPause.src=“../Images/playPause.png”；
}否则{
clip.pause（）；
playPause.src=“../Images/playArrow.png”；
}
});
clip.onended=函数（）{
playPause.src=“../Images/playArrow.png”；
};