使用香草的单个按钮切换音频javascript

我想制作一个简单的按钮来打开和关闭我的音频文件。使用香草的单个按钮切换音频javascript

一旦我点击播放，我无法关闭它。

我使用图像作为我的按钮，并使用div.onclick来触发此功能。

html audio标记有ID audioPlay。

我使用全局布尔值playSound，最初设置为false。

我的剧本是这样的：

var playSound = false; 
if (playSound != true) { 
    audioButton.src = '../../testStuff/audioPlay.png'; 
    audio.onclick = function() { 
     document.getElementById('audioPlay').play(); 
     playSound = true; 
     console.log(playSound); 
    } 
} 

if (playSound == true) { 
    audioButton.src = '../../testStuff/audioStop.png'; 
    audio.onclick = function() { 
     document.getElementById('audioPlay').pause(); 
     playSound = false; 
    } 
}

当我点击它，第一次它工作正常。它将playSound设置为true。

但是，当我第二次点击它时，没有任何反应。有些东西是playSound回到false，我不知道为什么。

我已经尝试切换==true if声明false一个以上，以及两个if语句擀成一个单一的onclick功能，但它仍然经营这种方式。

任何想法？

来源

2016-02-19 Wes

这是整个代码块？你在事件处理程序中发布了什么？ –

你使用html5音频标签来播放音频吗？看看这个原型的来源：http：//www.scottandrew.com/pub/html5audioplayer/ – visc

我没有使用音频播放器只是

我认为问题在于您要添加两个单独的点击处理程序，这两个处理程序都在每次点击时都执行。这导致playSound始终设置为true，但之后立即设置回false。

而是编写一个名为togglePlay的函数，它执行类似下面的操作，并将其设置为您的点击处理程序，但只能设置一次。

 

    function togglePlay() { 
     if (playSound) { 
     audioButton.src = '../../testStuff/audioStop.png'; 
     document.getElementById('audioPlay').pause(); 
     playSound = false; 
     } else { 
     audioButton.src = '../../testStuff/audioPlay.png'; 
     document.getElementById('audioPlay').play(); 
     playSound = true; 
     } 
    }

来源

2016-02-19 20:08:23

ahhh谢谢！我是一个白痴/怪人，我从来不喜欢使用其他语句，现在我意识到这是多么愚蠢。我在添加else时会采用它，它会遍历整个块并根据if语句的参数执行，而不是执行两个if语句。那么导致问题的原因是点击会发生，执行第一个if语句，切换到true，然后跳转到下一个if语句并将其重置为false？ – Wes

实际上，再想一想，你的变量被设置为'false'，所以当脚本被加载时，if语句被评估并且只添加一个事件处理程序，但它总是具有相同的结果。它首次将'playSound'的值更改为'true'，但是之后的每个点击事件都会继续将其设置为'true'。 if语句的唯一评估时间是脚本第一次加载的时间。之后，它只是在每次点击时执行第一个if语句内的代码。 –

使用香草的单个按钮切换音频javascript

回答

相关问题