2016-11-07 33 views
0

我正在創建一個網頁,我希望人們能夠按下鍵盤上的按鈕來播放聲音,並且我已經完成了這部分工作通過Google搜索一下。但是現在我想在頁面上打開/關閉開關,可以關閉鍵盤上的聲音,這樣不需要按鍵發出聲音的人就可以使用該選項,這可能嗎?是否可以有一個可以切換音頻播放狀態的按鈕

現在,我使用這個JavaScript和HTML播放聲音,只要按下一個按鈕(在本例中A):

的JavaScript:

$(document).keydown(function(e){ 
    if (e.keyCode == 65) { 
     document.getElementById('A').play(); 
     return false; 
    } 
}); 

HTML:

<audio id="A" src="A.ogg"></audio> 
+4

爲什麼禁用整個腳本?爲什麼不只是添加另一個條件到你的'if'語句並且有一些代碼切換那個標誌? –

+0

對不起,但我很新的JavaScript,我發現這個腳本在線,只是複製/粘貼它。我真的不明白你的意思,或者我會怎麼做,請你詳細說明一下嗎? –

+0

@Statzerx你可能不應該問你關於你的問題沒有先努力去理解 –

回答

0

我終於在googli後找到了解決方案在任何我能想象的事物周圍,最後我發現this回答別人在本網站上提出的另一個問題!所以這是我做到了使用回答:

HTML

<audio id="A" src="A.ogg"></audio> 

<button onclick="document.getElementById('A').muted=!document.getElementById('A').muted">Mute/ Unmute</button> 

的Javascript

$(document).keydown(function(e){ 
    if (e.keyCode == 65) { 
     document.getElementById('A').play(); 
     return false; 
    } 
}); 

所以用這個方法我沒有改變的Javascript在所有和它仍然沒有正是我想要它做的!

感謝大家誰試圖幫助,但因爲這是我第一次使用JavaScript,我不明白我應該怎麼做你的答案。我發現這個答案對我來說也很有意義,因爲我至少知道HTML的一些工作原理......但是,無論如何,謝謝!

2

只需設置一個布爾標誌來跟蹤播放狀態並檢查標誌以執行正確的操作:

這裏的長版本:

var playing = false; 
var playsound = function(e){ 
    if (e.keyCode === 65 && !playing) { 
     document.getElementById('A').play(); 
     playing = true; 
     return false; 
    } else if(e.keyCode === 65 && playing){ 
     document.getElementById('A').pause(); 
     playing = false; 
     return false; 
    } 
} 

或者,更濃縮版:

var playing = false; 
 
var a = document.getElementById('A'); 
 

 
document.addEventListener("keydown", function(e){ 
 
    if (e.keyCode === 65){ 
 
     (!playing) ? a.play() : a.pause(); 
 
     playing = !playing; 
 
     console.log("Sound is: " + playing); 
 
     return false; 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<audio id="A" src="" controls></audio>

+0

對不起,但也許我不明白我應該怎麼處理代碼,或者我的問題還不清楚(I'現在已經編輯了這個問題,以便更有意義)。如果我用這個按鈕代替JavaScript代碼,那麼它會停止工作。我正在尋找的是一個開/關開關,我可以放在頁面上,可以打開/關閉鍵盤按鍵聲音。再次抱歉,我應該更清楚,但無論如何感謝您的快速回答! –

+0

@Statzerx查看我答案中的代碼片段。這按你描述的方式工作。 –

+0

差不多!而不是A鍵打開/關閉聲音我想要一個像這樣的開關:https://proto.io/freebies/onoff/來做它,而不是在按鈕上調整時發出聲音,當它沒有關閉。 –

0

您可以刪除監聽器,並重新添加點擊按鈕

var playsound = function(e){ 
    if (e.keyCode == 65) { 
     document.getElementById('A').play(); 
     return false; 
    } 
} 
var soundEnabled = true; 

$("body").on("keydown", playsound); 

$(#button).click(function(){ 
    soundEnabled = !soundEnabled; 
    if(soundEnabled){ 
    $("body").on("keydown", playsound); 
    }else{ 
    $("body").off("keydown", playsound); 
    } 
}); 
相關問題