We Keep Coding

Press enter on an image and it plays a sound?

I have a tabbable image that I want to play a sound if it is tabbed to and enter is pressed. It's not a button for a form or anything, just an image. How can this be done?
<img src="/images/butt.gif" onclick="fartSound();" tabindex="0">
I already have Javascript where a sound is played when clicked, but I would really love it if I could also have the sound played when it is tabbed to and enter is pressed.
function fartSound(){
var sound = new Audio('/audio/fart.mp3');
sound.play();
};
Any ideas? Thanks!

You can listen to the focus event with javascript.
Something like element.addEventListener('focus', fartSound);
Working demo:
Just click on the white space and hit tab, you will see the console log.
function fartSound(){
console.log("Prrr");
var sound = new Audio('/audio/fart.mp3');
sound.play();
};
const funnyPic = document.getElementById('funnyPic');
funnyPic.addEventListener('focus', fartSound);
<img src="/images/butt.gif" tabindex="0" id="funnyPic">

Add addEventListeners for pressing(keydown) on 'enter'. and add onFocus event in HTML to call the function on click or tabbed
function fartSound(){
console.log('clicked');
var sound = new Audio('/audio/fart.mp3');
sound.play();
};
const element = document.getElementById('element');
element.addEventListener('keydown', function(e) {
//Enter key value is 13
if(e.which == 13) {
fartSound();
}
});
<img src="/images/butt.gif" onfocus="fartSound()" tabindex="0" id="element">

Accessibility: How to catch the Spacebar and the Enter key, aside the left mouse button?

Given a part of a function, that works perfectly when the left mouse is clicked (toggles the play/pause perfectly functional). However, when using a keyboard only browsing method using the tab key, the button gets selected with the tab but pressing the enter or the spacebar doesn't play or pause the audio, so the toggle is not accessible by keyboard. Since the play button starts the screenreader for the visually impaired/blind, and blind people do not use a mouse, this key must be pressed using a keyboard only method: a spacebar or an enter. How to implement those two keystrokes alongside the currently working left mouse button sothat instead of one trigger, all three triggers play and pause the screen reader? Thanks, on behalf of future blind users without a mice.
// starts the screen reader
play.addEventListener('click', function() {
myAudio.play();
});
// pauses the screen reader
pause.addEventListener('click', function() {
myAudio.pause();
});
jsfiddle demo works with mouseclick but not an Enter/ Spacebar keypress

Note: This answer has been edited for accuracy.
After reading OP's comment, this is the solution to their problem.
Your new HTML:
<audio src="http://labs.qnimate.com/files/mp3.mp3"></audio>
<play tabindex="1">PLAY</play>
<pause tabindex="1">PAUSE</pause>
Your new CSS:
play, pause {
display: none;
text-align:center;
vertical-align:middle;
width: 200px;
height: 50px;
font-size: 30px;
background: yellow;
cursor: pointer;
}
play:focus, pause:focus { /* TABBED BROWSING */
outline: 2px solid #00F;
}
Your new JavaScript:
var myAudio = document.getElementsByTagName('audio')[0];
var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];
function displayControls() {
play.style.display = "block";
}
// check that the media is ready before displaying the controls
if (myAudio.paused) {
displayControls();
} else {
// not ready yet - wait for canplay event
myAudio.addEventListener('canplay', function() {
displayControls();
});
}
play.addEventListener("keyup", function(event) {
let KEY = event.code;
if (KEY === "Enter" || KEY === "Space") { // Space or Enter pressed.
myAudio.play();
play.style.display = "none";
pause.style.display = "block";
pause.focus(); // This is very important. Without it the UI breaks.
}
});
pause.addEventListener("keyup", function(event) {
let KEY = event.code;
if (KEY === "Enter" || KEY === "Space") { // Space or Enter pressed.
myAudio.pause();
pause.style.display = "none";
play.style.display = "block";
play.focus(); // This is very important. Without it the UI breaks.
}
});
play.addEventListener('click', function() {
myAudio.play();
play.style.display = "none";
pause.style.display = "block";
});
pause.addEventListener('click', function() {
myAudio.pause();
pause.style.display = "none";
play.style.display = "block";
});
Here is information on what events you can listen for.
Here is information on getting the code for keyboard input.

Javascript set value by document ID

What I would like to do is if there is clicked at the 'reset' button, the value of a other button changes. I tried to use the document.getelementbyid property but it seems not to work. Does somebody know how I should implement this?
function reset() {
stop();
x.reset();
update();
opnieuw = setTimeout(function(){
document.getElementById("scherm3").style.display = "block";
document.getElementById("scherm2.2").style.visibility = "hidden";
}, 10000);
clearTimeout(timeOut);
clearTimeout(timeOutElse);
document.getElementById("buttontimer").value = "Start";
}
setTimeout(start, 5000);
function toggleTimer(event) {
if (isTimerStarted) {
stop();
event.target.value = 'Start';
timeOut = setTimeout(function(){
document.getElementById("scherm4").style.visibility = "visible";
document.getElementById("scherm2.2").style.visibility = "hidden";
}, 4000)
clearTimeout(opnieuw);
clearTimeout(timeOutElse);
}
else {
start();
event.target.value = 'Stop';
timeOutElse = setTimeout(function(){
document.getElementById("scherm3").style.display = "block";
document.getElementById("scherm2.2").style.visibility = "hidden";
}, 8000)
clearTimeout(timeOut);
clearTimeout(opnieuw);
}
}
and HTML:
<div id="button1"><input type="button" value="Stop" onclick="toggleTimer(event); clicks5times();" id="buttontimer"></div>
<input type="button" value="Opnieuw" onclick="reset()" class="button2" id="opnieuw">

You could probably just make your code simpler by simply having a "Start" and "Stop" button, separately, and just show/hide the correct button for the current context. You are already (sort of) doing this, by showing the "Reset" button. Just make this a "Stop" button. When they click "Start", the "Start" button is hidden and the "Stop" button is shown. Click "Stop", and "Stop" is hidden and "Start" is shown. You could even use a global boolean to track state and make the "Stop" button behave like a "Pause" button, and show an additional "Reset" button that puts the timer back to 0. That all depends on what, exactly, you are trying to accomplish.

use spacebar to play/pause video in reveal.js

I’m using reveal.js for a presentation of some short video clips (1 clip per slide). The default settings of reveal.js presentation allow to navigate between the slides using the left/right arrow keys. I’d like to use the spacebar (key=32) to play/pause the video and thus I am trying to change/override the default keyboard bindings in reveal.js. https://github.com/hakimel/reveal.js/ suggests the following:
Reveal.configure({
keyboard: {
32: function() {}
}
});
I tried to insert several codes/functions, but when I try to run the code on a browser, either I get a black screen or nothing at all happens.
var video = document.getElementById('video');
var $video = $('video');
$(window).keydown(function(e) {
if (e.keyCode === 32) {
if (video.paused == true)
video.play();
else
video.pause();
}
});
As you can see, I am an absolute beginner in JS/reveal.js and I would very much appreciate your help. Thanks!

that will fix your problem:
Reveal.initialize({
// Enable keyboard shortcuts for navigation
keyboard: true,
}
and for the custom keyboard events:
Reveal.configure({
keyboard: {
13: 'next', // go to the next slide when the ENTER key is pressed
27: function() {}, // do something custom when ESC is pressed
32: function(){
if (video.paused == true) video.play();
else video.pause();
}
}
}
});

Thanks! but with this code I only get a black screen. However, it works as follows for the first clip:
Reveal.configure({
keyboard: {
13: 'next', // go to the next slide when the ENTER key is pressed
27: function() {}, // do something custom when ESC is pressed
32: function vidplay(){
var video = document.getElementById("video");
if (video.paused == true) video.play();
else video.pause();
}
}
});
Do you know how I can make this work for the other clips/slides? The video-id is "video" for every clip on every slide:
<video width="1200" height="600" ``controls id="video">
<source src="F06.mp4" type="video/mp4" >
</video>

I know I am responding to an old post. I found this thread when trying to find something that would work for me, and it lead to the solution I implemented.
The other solutions only seemed to work for one video, and (when combined with other suggestions I found) there were some other issues such as spacebar playing the video after leaving the slide.
I used this configuration:
Reveal.initialize({
keyboard: {
13: 'next',
32: () => {
var currentSlide = Reveal.getCurrentSlide();
var currentVideo = currentSlide.getElementsByTagName("video")[0];
if (currentVideo) {
if (currentVideo.paused == true) currentVideo.play();
else currentVideo.pause();
}
else {
Reveal.next();
}
}
}
});
Using the configuration above, spacebar will only play/pause a video when there is a video on the current slide. Otherwise, spacebar advances to the next slide.
Some other solutions worked in Chrome but not Firefox due to differences in the way they handle the video element, but this approach worked

How can I toggle a onclick="function" for a button

I have a button that plays and stops a video. How can I toggle between the .play() and .pause() efficiently?
<button id="thebutton" onclick="BV.getPlayer().play();"></button>

First off, I would suggest not using inline event handlers. If you're using jQuery, then I suggest you use that.
After each click, set a variable to tell whether it's playing or not, then trigger the correct action.
$(function(){
$('#thebutton').click(function(){
var isPlaying = $(this).data('isplaying');
if(isPlaying){
BV.getPlayer().pause();
}
else{
BV.getPlayer().play();
}
$(this).data('isplaying', !isPlaying);
});
});
jQuery used to have a .toggle() "event", but it was removed.

Add a class that acts as check for the player status. And then use this code.
$("#theButton").click(function() {
if($(this).hasClass('playing')) {
BV.getPlayer().pause();
} else {
BV.getPlayer().play();
}
$(this).toggleClass('playing')
})

$('#thebutton').click(function() {
if ($(this).val() == "play") {
$(this).val("pause");
play_int();
}
else {
$(this).val("play");
play_pause();
}
});
or
$(function(){
$('#play').click(function() {
// if the play button value is 'play', call the play function
// otherwise call the pause function
$(this).val() == "play" ? play_int() : play_pause();
});
});
function play_int() {
$('#play').val("pause");
// do play
}
function play_pause() {
$('#play').val("play");
// do pause
}
aka
jquery toggle button value

var isPlaying = false;
var player = BV.getPlayer();
$("#thebutton").click(function() {
if (isPlaying) {
player.pause();
isPlaying = false;
} else {
player.play();
isPlaying = true;
}
});