Use key commands instead of "on click"

Is there some way to use key commands in the same way as “on click.?” For example, user press a key and a sound is played.

Thank you!
Matt

1 Like

You can use regular JavaScript for that. You would run this ‘On Scene Load’ :

var myAudio = document.getElementById("myAudio");

var key = function (e) {

e = e || window.event;
var k = e.keyCode || e.which;

// pressing the right arrow will pause or play your audio element... 
if (k == 39) {
if (myAudio.paused); 
  myAudio.play(); 
else 
  myAudio.pause(); 
};
};

// for more key codes, view http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
1 Like

Thanks @Daniel

I cannot get it to work though…
If my audio file is cChord.mp3 would the javascript look like this?:

var myAudio = document.getElementById("cChord");

var key = function (e) {

e = e || window.event;
var k = e.keyCode || e.which;

// pressing the right arrow will pause or play your audio element…
if (k == 39) {
if (myAudio.paused);
myAudio.play();
else
myAudio.pause();
};
};

First you’ll need to drag your audio files into the resource folder, and create an audio element. Insert this in the inner HTML of a rectangle:

<audio id="cChord" width="400" controls="controls" preload="auto">
    <source src="${resourcesFolderName}/cChord.mp3" type="audio/mpeg"> <!-- Safari and iPhone -->
    <source src="${resourcesFolderName}/cChord.ogg" type="audio/ogg"> <!-- Firefox and Chrome -->
</audio>  

This can be off the scene area. It basically makes an audio element which can be targeted using the ‘getelementbyid’ command.

So with the ‘id’ set above, you can then target it with this code:

    var myAudio = document.getElementById("cChord");

var key = function (e) {

e = e || window.event;
var k = e.keyCode || e.which;

// pressing the right arrow will pause or play your audio element... 
if (k == 39) {
if (myAudio.paused); 
  myAudio.play(); 
else 
  myAudio.pause(); 
};
};

// for more key codes, view http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes 

There’s a bit more info about working with audio here: Controlling Audio & Advanced Techniques (Play, Pause, Rewind, Volume control)

1 Like

Thanks @Daniel
I have it set up as you describe but it is not working for some reason?

Here you go. Thanks!

SoundwithKey.zip (213.7 KB)

Matt, what code did you use. The Zip minifies it, so we cannot see what you changed ?

The code used is wrong and has a syntax error.

Use this code for an “On Key Down” handler (not press - those don’t get non-character keys):

	var myAudio = document.getElementById("cChord");
	event = event || window.event;
	var key = event.keyCode || event.which;
	
	if (key == 39) {
		if (myAudio.paused) {
			myAudio.play(); 
		} else {
			myAudio.pause(); 
		}
	}

Yes! That worked. Thank you @jonathan! :smiley:

1 Like

Hi Daniel! I’ve just seen this post while researching how to make space bar a play/pause button for audio and video, BUT what I’m messaging you about is that I’ve seen you used two different codes for firefox/chrome and safari/iphone. It made me wonder something very important - for my project to work on android phones and iphones, do I need to be including additional code with audio/video rectangle elements?

Thanks so much

To the best of my knowledge, you’ll want to do the same for iOS/Android (note both Mobile Safari and Android’s Chrome are based on WebKit). Of course the keyboard isn’t shown much with these browsers, so I’d question using key events :slight_smile:.

1 Like