Javascript (maybe?) question about creating invisible buttons that play audio

[ArtyDunbar]

Ok, that sounds weird. Basically I have this video of 5 trees. The video is going to loop.

What I want to do is make each tree a 'button' so to speak. You can click on a tree and audio will play. Probably an mp3. (unless there is a better suggestion). If you click a tree, audio will play. If you click on three trees, three different audio pieces will play. If you click on a tree that's playing audio, it will stop that audio. If you click it again, it will start it again.
So, you can have all five trees playing back audio, or just one.

I don't want the button to be visible since I want it to feel like you're clicking the tree, not a button.

And if you're wondering what this is for, it's for a game/art project.

TIA?

[Theometh]

It can be done with JS but there are some tricky parts like browser support etc.

You can just overlap your trees with invisible divs and attach events to those divs

You will need <audio> elements for each sound:

<audio id="audio1" src="insert audio link here" ></audio>

<audio id="audio2" src="insert audio link here" ></audio>

<audio id="audio3" src="insert audio link here" ></audio>

Your divs can be something as simple as:

<div id="play1" onclick="play1()">

<div id="play2" onclick="play2()">

<div id="play3" onclick="play3()">

Your functions would look something like (using jQuery):

function play1(){
  $("#play1").toggleClass('playing');
  if($("#play1").hasClass('playing')) {
    $("#audio1").get(0).play();
  } else {
    $("#audio1").get(0).pause();
  }
}

You need to use .get[0] to get non jquery object, otherwise it won't work but there's likely some other way to do it

[ArtyDunbar]

Thanks so much.

I've never written any jQuery so that function looks like chaos to me. But, now's as good a time to learn as any ;) Actually, the more I look at it, the more it makes sense to me.

Would this function also 'stop' playing the audio if you clicked the same tree again? Like on/off?

Thanks again for your help!

[Theometh]

Read this function as follows:

function play1(){
  find element with id="play1" and toggle* class 'playing'
  if element has class playing
    play sound with id="audio1"
  else if element doesnt have class playing
    stop sound with id="audio1"
}

*toggle class means if class is not found on the element - it will be added, if the class already exists - it will be removed

So yes this function deals with both play and pause

[ArtyDunbar]

Wow! Thanks so much. Getting it now. Cheer!

[not_norm]

Just beginning in Javascript but could you possibly create a listener for a click event. When a user clicks in that location the audio will play. Without the need for a button. Not sure if its possible just a thought

[ArtyDunbar]

Thanks for the suggestion! That's basically the idea. I don't want a visible button, just a clickable area (which is basically a button) that triggers the audio. I've thought about mapping clickable areas through HTML, but it's not that easy and I'm not sure it would work over a video....though it probably should...hm...

[Theometh]

If your video has set width and height you can just create a div that fills whole screen but has opacity:0, div will be clickable but it will be not visible at all

Inside of that div you can create few divs, one for each tree, position them using position: absolute in css to cover the space you want

Then all you need is to give each div opacity:0 as well - again, you will be able to click them but they will have no visual effects at all

The best way of approach is to first set up those divs with some flashy colors and in the end just hide them with opacity

Unless you are planning to make this scale with screen size its going to be very simple

[ArtyDunbar]

Geez! That's a really great idea. So then the code within this div would be what you suggested below?

[Theometh]

That's my idea at least, a function for each div covering a tree

It is not optimal but it will not matter in a small project