javascript - Javascript条件语句问题

Question

问题 1。我正在尝试使用 JCE 编辑器在 Joomla 中编写代码，其中我有一个音频文件，我正试图在 bowser 上播放。 以下是我写的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>

CSS代码如下；

<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>

在这种情况下，当我单击播放按钮时执行音频播放，但是当我第二次单击按钮停止音频时，它不会停止，因为没有任何反应，音频继续播放，尽管我已经包含了 else指定 audio.pause 是否不正确的语句，即如果正在播放音频，则单击音频应停止并应显示播放按钮，但没有任何反应发生。 我试过在编写以下代码的地方反转代码；

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 编辑器中允许使用该脚本

请告知问题原因。

问题 2。最后我想知道如何编写代码来在音频完全播放后显示播放按钮？

Answer 1

你少了一个“d”。 audio.paused 用于检查音频是否暂停。 audio.pause 是暂停音频的函数。

将您的条件更改为:

if (audio.paused) {

Further reading