Java脚本条件语句问题

时间:2017-08-22 14:55:33

标签: javascript html css joomla

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

在这种情况下,当我单击播放按钮时执行音频播放,但是当我第二次单击按钮停止音频时它不会停止,因为没有任何反应并且音频继续播放,尽管我已经包含了其他内容声明指定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)";
                            } 
                        }

然后在这种情况下,只有当音频正在播放时,如果我点击暂停按钮它就可以工作,当我尝试播放音频时它不会播放。

所以在这两种情况下我都发现其他内部的代码没有执行,我无法理解为什么会发生这种情况。

我使用的是Joomla 3.7.5,JCE编辑器中允许使用该脚本

请告知问题的原因。

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

1 个答案:

答案 0 :(得分:1)

你错过了一个“d”。 audio.paused用于检查音频是否已暂停。 audio.pause是暂停音频的功能。

将您的条件更改为:

if (audio.paused) {

Further reading