How to make sound play only once on mouse over in Processing? - audio

Question

I'm trying to make a sound play when the mouse moves over a button in Processing. Currently, it is playing over and over again because my button class is in the draw() function. I understand why this is happening, but I can't think of a way to only play the sound once while still being tied to my overRect() function.
main:
import processing.sound.*;
PlayButton playButton;
SoundFile mouseOverSound;
SoundFile clickSound;
color white = color(255);
color gray = color(241, 241, 241);
PFont verdanabold;
void setup()
{
size(720, 1280);
textAlign(CENTER);
rectMode(CENTER);
verdanabold = createFont("Verdana Bold", 60, true);
playButton = new PlayButton();
mouseOverSound = new SoundFile(this, "mouseover.wav");
clickSound = new SoundFile(this, "click.mp3");
}
void draw()
{
background(gray);
playButton.display(); // draw play button
}
playButton class:
class PlayButton // play button
{
float rectX = width/2; // button x position
float rectY = height-height/4; // button y position
int rectWidth = 275; // button width
int rectHeight = 75; // button height
boolean rectOver = false; // boolean determining if mouse is over button
void display() // draws play button and controls its function
{
update(mouseX, mouseY);
if(rectOver) // controls button color when mouse over
{
fill(white);
mouseOverSound.play(); // play mouse over sound
}
else
{
fill(gray);
}
strokeWeight(5); // button
stroke(black);
rect(rectX, rectY, rectWidth, rectHeight);
textFont(verdanabold, 48); // button text
fill(black);
text("PLAY", rectX, rectY+15);
if(mousePressed && rectOver) // if mouse over and clicked, change to state 1
{
state = 1;
clickSound.play(); // play click sound
}
}
void update(float x, float y) // determines if mouse is over button using overRect(), changes boolean rectOver accordingly
{
if(overRect(rectX, rectY, rectWidth, rectHeight))
{
rectOver = true;
}
else
{
rectOver = false;
}
}
boolean overRect(float rectX, float rectY, int rectWidth, int rectHeight) // compares mouse pos to button pos and returns true if =
{
if(mouseX >= rectX-rectWidth/2 && mouseX <= rectX+rectWidth/2 && mouseY >= rectY-rectHeight/2 && mouseY <= rectY+rectHeight/2)
{
return true;
}
else
{
return false;
}
}
}

Answer 1

Figured it out.
Initialized int i = 0. While mouse is over the button, plays sound while i < 1, then increments i by 1 inside the while loop so it stops playing. When mouse is not over the button, i is set back to 0.
Edited playButton class:
class HowToButton // how to button
{
float rectX = width/2; // button x position
float rectY = height-height/8; // button y position
int rectWidth = 275; // button width
int rectHeight = 75; // button height
boolean rectOver = false; // boolean determining if mouse is over button
int i = 0;
void display() // draws how to button and controls its function
{
update(mouseX, mouseY);
if (rectOver) // controls button color when mouse over
{
fill(white);
while(i < 1) // play sound while i < 1
{
mouseOverSound.play(); // play mouse over sound
i++; // increment i so sound only plays once
}
}
else
{
fill(gray);
i = 0; // set i back to 0 when mouse leaves bounds of button
}
strokeWeight(5); // button
stroke(black);
rect(rectX, rectY, rectWidth, rectHeight);
textFont(verdanabold, 48); // button text
fill(black);
text("HOW TO", rectX, rectY+15);
if(mousePressed && rectOver) // if mouse over and clicked, change to state 2
{
state = 2;
clickSound.play(); // play click sound
}
}
void update(float x, float y) // determines if mouse is over button using overRect(), changes boolean rectOver accordingly
{
if(overRect(rectX, rectY, rectWidth, rectHeight))
{
rectOver = true;
}
else
{
rectOver = false;
}
}
boolean overRect(float rectX, float rectY, int rectWidth, int rectHeight) // compares mouse pos to button pos and returns true if =
{
if(mouseX >= rectX-rectWidth/2 && mouseX <= rectX+rectWidth/2 && mouseY >= rectY-rectHeight/2 && mouseY <= rectY+rectHeight/2)
{
return true;
}
else
{
return false;
}
}
}

Answer 2

You could use a boolean variable that indicates whether the sound is already playing. Something like this:
if(mousePressed && rectOver && !alreadyPlaying)
{
alreadyPlaying = true;
state = 1;
clickSound.play(); // play click sound
}
In fact, you might be able to use the state variable:
if(mousePressed && rectOver && state != 1)
{
state = 1;
clickSound.play(); // play click sound
}
You could also look into the sound library you're using, it might have a function that tells you whether the sound is already playing, which you could use in the same way.