Java脚本条件语句问题

以下是我编写的java脚本代码;

<script type="text/javascript">
                var audio, playbtn;

                function initAudioPlayer() {
                    audio = new Audio();
                    audio.src = "/images/audios/how-to-meditate/relaxation/relaxation-in-the-forest.mp3";
                    audio.loop = false;
                    audio.pause();
                    //set object references
                    playbtn = document.getElementById("playpausebtn");
                    //Add Event Handling
                    playbtn.addEventListener("click", playPause);
                    //Funtions
                    function playPause() {
                        if (audio.pause) {
                            audio.play();
                            playbtn.style.background = "url(images/icons/pause.JPG)";
                        } else {
                            audio.pause();
                            playbtn.style.background = "url(images/icons/play.JPG) no-repeat";
                        } 
                    }
                }
                window.addEventListener("load", initAudioPlayer);
            </script>

<style scoped="scoped" type="text/css">
    button#playpausebtn {
        background: url(images/icons/play.JPG) no-repeat;
        border: none;
        width: 40px;
        height: 40px;
        cursor: pointer;
        outline: none;
    }

以及html的按钮代码;

<button id="playpausebtn"></button>

我已经试着反转代码,写下面的代码;

function playPause() {
                            if (audio.play) {
                                audio.pause();
                                playbtn.style.background = "url(images/icons/play.JPG) no-repeat";
                            } else {
                                audio.play();
                                playbtn.style.background = "url(images/icons/pause.JPG)";
                            } 
                        }

因此,在这两种情况下,我都观察到else中的代码没有执行,我无法理解为什么会发生这种情况。

我使用的是Joomla 3.7.5,脚本可以在JCE编辑器中使用

Q、 2。最后,我想知道如何编写一个代码来显示播放按钮,一旦音频完全完成播放?