2016-11-07 36 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); 
    } 
}); 
相关问题