Sound Effect
Play a sound effect when the mouse is clicked inside the circle.
To run this example locally, you will need the p5.sound library a sound file, and a running local server.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// Adapted from Learning Processing by Daniel Shiffman
// http://www.learningprocessing.com
// Doorbell sample by Corsica_S via freesound.org,
// Creative Commons BY 3.0
// A Class to describe a "doorbell" (really a button)
class Doorbell {
constructor(x_, y_, r_) {
// Location and size
this.x = x_;
this.y = y_;
this.r = r_;
}
// Is a point inside the doorbell? (used for mouse rollover, etc.)
contains(mx, my) {
return dist(mx, my, this.x, this.y) < this.r;
}
// Show the doorbell (hardcoded colors, could be improved)
display(mx, my) {
if (this.contains(mx, my)) {
fill(100);
} else {
fill(175);
}
stroke(0);
strokeWeight(4);
ellipseMode(RADIUS);
ellipse(this.x, this.y, this.r, this.r);
}
}
// A sound file object
let dingdong;
// A doorbell object (that will trigger the sound)
let doorbell;
function setup() {
createCanvas(200, 200);
// Load the sound file.
// We have included both an MP3 and an OGG version.
soundFormats('mp3', 'ogg');
dingdong = loadSound('assets/doorbell.mp3');
// Create a new doorbell
doorbell = new Doorbell(width / 2, height / 2, 32);
}
function draw() {
background(255);
// Show the doorbell
doorbell.display(mouseX, mouseY);
}
function mousePressed() {
// If the user clicks on the doorbell, play the sound!
if (doorbell.contains(mouseX, mouseY)) {
dingdong.play();
}
}
