使用香草的單個按鈕切換音頻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

回答

相關問題