Click Image to Make Sound Play

I’m trying to add a mouse press event to an image which I think is possible since I’ve seen may questions posted about it on the forum. However I have an image of a play button. I want to use this image as a button to play/pause music. So far I haven’t found anything on mouse press for images to play music. Does anyone know where I can read more about this specific topic? Still looking through documentation haven’t found anything yet. Heres some snip it of my code:

PImage play;
play = loadImage("play.png"); // in setup
imageMode(CORNER); // in draw
image(pause, 80, 15, 50, 50); // in draw

For this example he has a square with 4 exact points. I’m using an image thats a circle, I’m not sure how to get the points for it. @GoToLoop

Images tend to have a rectangular shape.

Just check whether the clicked mouse coords. are within your image’s position & dimension.

This works, I tried it but I don’t want the user to mouse over, I want them to be able to click the button (the image which I’m using as the button). The user would assume that the image is a button and click on it, not mouse over. @GoToLoop

I also have 2 other buttons, pause and shuffle. I think I would need to repeat that code and rename everything to use the mouse over. Do you know of any other ways where they can physically click on the button?

Just don’t do anything when it’s just hovering. Do the check when a mousePressed() happens:

Create a class that encapsulates all the behavior & data needed to check collision for 1 image:

Making progress…

// In draw function
    //Image for play button
    image(play, 20, 15, 47, 47); 
    //Image for pause button
    image(pause, 80, 15, 50, 50); 
    //Image for shuffle button
    image(shuffle, 140, 15, 50, 50); 

void mousePressed(){
  if(mouseX > 20 && mouseX < 67 && mouseY > 20 && mouseY < 67){;
  if(mouseX > 80 && mouseX < 130 && mouseY > 80 && mouseY < 130){ 
  if(mouseX > 140 && mouseX < 190 && mouseY > 140 && mouseY < 190){ 

//shuffle method
//Playlist gets reshuffled if mouse is click again
void shufflePlayList() {

Instead of all those other variables from the example I checked the mouseX and mouseY. I took the 1st number and the 3rd number to get mouseX & Y. Ex: image(play, 20, 15, 47, 47); —> 20 for mouseX & 20 + 47 = 67. My play button works but the pause and stop don’t. I checked my calculations for the other 2 buttons and did them the same way but those don’t work. Do you have any ideas on what I could be doing wrong? @GoToLoop

Coordinates are (80, 15) & dimensions are (50, 50) for the pause image.

So why are you checking mouseY > 80 instead of mouseY > 15?

Same for dimensions check: mouseY < 130 instead of mouseY < 15 + 50.

Again, it’s more organized to have those data inside an instance of a dedicated class.

I saw a video and the put the 80 as mouseX and then for mouseY they took 1st and 3rd number, that why. I also don’t remember the order for inside the (). I think its x,y, height, width but I’m not 100% sure. So you’re saying it’s not 1st and 3rd its 2nd and 3rd numbers? @GoToLoop

I got it! All of them except shuffle, I checked the calculation and I don’t think it’s wrong. Do you think it could be the way I’m calling the shuffle playlist? @GoToLoop

void shufflePlayList() {

//Shuffle button
  if(mouseX > 140 && mouseX < 190 && mouseY > 15 && mouseY < 65){ 

The sound library is another matter.

In order to debug if the collision check is being detected just add a println():

I’m seeing shuffling print multiple times. @GoToLoop

It should only println() once per click if it’s inside mousePressed().

Right, sorry I meant it printed once. I just kept clicking shuffle thats why I saw it multiple times but it was there only once. Could this be because the shuffle is supposed to be outside mousePressed? That wouldn’t make sense but I can’t think of another reason why it’s not working @GoToLoop

No idea what variable tableau got anything to do w/ variable player.

And I’m not very knowledgeable w/ the sound library, so I can’t help you much about it.

I’m a little late chiming in. This is how I’d do it:
Round images are easier.
Load your images. .png files make it easy to create round buttons.
Create a Button class. In the button class create a Button constructor that contains position (I’d use PVector()), radius, and name.
Before setup() create a Button array
Button [] button;
In setup create your buttons.
button = new Button (pos, radius, buttonName);
Do this for each button.
Make sure your button constructor is setup to receive the button properties
Button(PVector position, float radius, String buttonName){ }
Now to check your buttons
void mouseClicked(){
for(int i = 0; i < button.length; i++){
float d = dist(mouseX, mouseY, buttonName[i].position.x, buttonName[i].position.y);
if(d <= buttonName[i]){
//Button is clicked
//Here I would with a previous int whichBotton = 0
whichButton = i;
//Test it
println("Clicked " + buttonName[i]);
This way of doing buttons is quite reusable
Hope this helps.
Let me know if you have any questions