Can javascript be used for two buttons at once?

Question

I've recently been learning / working with javascript, and can get it to work OK. However, I don't seem to be able to get it to play 2 buttons hit at the same time.

For example, [button1] [button2]

where each has a different sound programmed to it. You can hit each one and get a sound, but when you hit both, you don't get any sound.

Is there a way to get both to play their sounds when you hit them both?

Thanks

...

my code if relevant:

  <button id="Eb3btn"></button>
  <button id="Fbtn"></button>

  <script src="<?php bloginfo('stylesheet_directory'); ?>/javascript/howler.js/howler.min.js"></script>
  <script>
      var Eb3 = new Howl({urls: ["<?php bloginfo('stylesheet_directory'); ?>/sounds/Eb3.mp3"]})
      document.getElementById('Eb3btn').onclick=function(){Eb3.play()};

      var F3 = new Howl({urls: ["<?php bloginfo('stylesheet_directory'); ?>/sounds/F3.mp3"]})
      document.getElementById('Fbtn').onclick=function(){F3.play()};
  </script>

If it's a piano you're doing, then probably you're "clicking" it by pressing keys on the keyboard, rather than a mouse click? If so, you might want to use [EventListeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to listen for keypresses. — userx01, Feb 05 '16 at 01:45
Actually, I'm using it on a touch screen in this case though — Snow, Feb 05 '16 at 01:54

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

JavaScript runs within a single execution thread so you will never be able to get them to click truly 100% at the same time.

The closest you can get to having them be clicked together is:

var btnEb3 = document.getElementById('Eb3btn'),
    btnF = document.getElementById('Fbtn');

btnEb3.click();
btnF.click();

Some more information about JavaScript threads: Why doesn't JavaScript support multithreading?

So, putting my snippit with your example could look something like:

<script>
var Eb3 = new Howl({urls: ["<?php bloginfo('stylesheet_directory'); ?>/sounds/Eb3.mp3"]})
document.getElementById('Eb3btn').onclick=function(){Eb3.play()};

var F3 = new Howl({urls: ["<?php bloginfo('stylesheet_directory'); ?>/sounds/F3.mp3"]})
document.getElementById('Fbtn').onclick=function(){F3.play()};

// have Eb3 and F play together:
document.getElementById('Eb3btn').click();
document.getElementById('Fbtn').click();
</script>

edited May 23 '17 at 12:15

Community

1
1

answered Feb 05 '16 at 01:13

Jonathan.Brink

23,757
20
73
115

That's too bad. Any suggestions what my next thing to try would be for making multiple buttons play at one time? (as in a piano) – Snow Feb 05 '16 at 01:16
WebWorkers may be something to look into: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers – Jonathan.Brink Feb 05 '16 at 01:16
His snippet should work for you. the `click` method simulates a click. So btnEb3 will play first then btnF – colecmc Feb 05 '16 at 01:17
click method, you say? – Snow Feb 05 '16 at 01:25
@Snow typically the verbiage `function` in JavaScript is used, but "function" and "method" can usually be used interchangeably especially if it's a function off of an object (as `click` is) – Jonathan.Brink Feb 05 '16 at 01:26
That's interesting. I'd like to try that. What would I have to change? – Snow Feb 05 '16 at 01:30
I don't understand how to implement this to try it out, unfortunately. How do I change my code to include your solution please? – Snow Feb 06 '16 at 00:55
@Snow I combined my answer with your snippit to show how you can use your current code to click the buttons – Jonathan.Brink Feb 06 '16 at 01:03
Thank you for trying. The result I get is pretty much the same though – Snow Feb 06 '16 at 03:03

Can javascript be used for two buttons at once?

1 Answers1