# Playing sound files in p5.js
**URL:** https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286
**Category:** Libraries
**Created:** [March 5, 2021, 5:16pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286 "2021-03-05T17:16:15Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Annushka123](https://discourse.processing.org/u/Annushka123)
#### Post date: [March 5, 2021, 5:16pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/1 "2021-03-05T17:16:15Z")
Hi!
I’m working through the p5.js course in Kadenze and I’m trying to play an audio sample while my mouse hovers over a section of my sketch:
if (mouseX \> 600 && mouseX \<700){
sound\_out.play();
} else {
sound\_out.stop();
}
this block of code is inside the draw function. When it is triggered, it sounds horrible. In all the examples I have found, the playback is triggered within a mousePressed or canvasPressed function, but I don’t want to do that. Is there a different function I should use, or change playback rate somehow?
Many thanks,
Anna
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 5, 2021, 8:23pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/2 "2021-03-05T20:23:52Z")
I think the problem is that play function is triggered every frame while your cursor is in the area. When you ask questions, I suggest sharing your sketch on web editor so we can look into it further 🙂
---
### Author:  [@Annushka123](https://discourse.processing.org/u/Annushka123)
#### Post date: [March 6, 2021, 4:27pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/3 "2021-03-06T16:27:03Z")
Hi! Thanks for your suggestions. That does make sense, but I’m not sure how to fix the problem or go about it a different way. Here is my code:
//strobe variable
var strobe = 10;
//image variables
var img\_out;
var img\_dan;
var img\_east;
var img\_po;
var img\_path;
//sound variables
var sound\_po;
var sound\_out;
function preload() {
img\_out = loadImage(“outkast.jpeg”);
img\_dan = loadImage(“danger.jpeg”);
img\_east = loadImage(“east\_point.png”);
img\_po = loadImage(“police.jpeg”);
img\_path = loadImage(“path.jpeg”);
sound\_po = loadSound(“police\_siren.mp3”);
sound\_out = loadSound(“outkast\_short.mp3”);
}
function setup() {
createCanvas(700, 600);
}
function draw() {
noFill();
strokeWeight(4);
var c = (‘rgba(255, 255, 0, 255)’);
background©;
//police siren
if (mouseX \> 50 && mouseX \<300){
sound\_po.play();
} else {
sound\_po.stop();
}
//outkast
if (mouseX \> 600 && mouseX \<700){
sound\_out.play();
} else {
sound\_out.stop();
}
//background color change near police car
if (mouseX \> 50 && mouseX \<250) {
c = (‘rgba(255, 0, 0, 100)’);
background©;
}
//police car
var expandX = map(pmouseX, 0, 322, 280, 360 );
var expandY = map(mouseY, 0, 156, 130, 180);
if (mouseY \<300 && mouseX \< 400) {
image(img\_po, 10, 10, expandX, expandY);
} else {
image(img\_po, 10, 10, 322, 156);
}
//strobing circles
strobe = strobe + 10;
if (mouseX \> 50 && mouseX \<300) {
ellipse(width/2, height/2, strobe, strobe);
}
if (strobe \> height&&width ) {
strobe = 10;
}
image(img\_out, 390, 10);
image(img\_dan, 400, 400);
image(img\_east, 250, 200);
image(img\_path, 10, 330);
}
Now that I understand the issue, I will try different things.
Thanks again.
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 6, 2021, 7:33pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/4 "2021-03-06T19:33:50Z")
Hi! Glad it helped a bit. When I say posting the code, I recommend you to use the web editor with necessary assets (images and sound files) so we can try it easily (we are volunteers so you would have a better chance of getting answers by doing so).
Given that, I haven’t tried the code, but I would suggest two things. One is to play the sound _only if_ the file is not playing or paused. If you look at the reference, you can find [isPlaying](https://p5js.org/reference/#/p5.SoundFile/isPlaying), which tells you if the playback is finished or not. Also you can note the time when you started playing the file as a variable (probably getting from millis) and don’t play the file till the duration of the file has passed.
Another approach is totally different one, to loop the sound all the time and set the volume to 100% only when the cursor is inside the area. This is actually super easy because you can keep setting volume every frame without conditions, but two things to note: one is that on a browser you always need “user interaction” for example a mouse click to start playing the sound. Another problem is that since it’s always looping, the sound may start in the middle of the loop when the volume is turned on.
---
### Author:  [@Annushka123](https://discourse.processing.org/u/Annushka123)
#### Post date: [March 6, 2021, 9:24pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/5 "2021-03-06T21:24:29Z")
[https://editor.p5js.org/saveryanna/sketches/0CU7eZMtk](https://editor.p5js.org/saveryanna/sketches/0CU7eZMtk)
Hi Really appreciate your time and your comments! I’m new to this, so hoping I shared the code correctly this time round.
Looking forward to working through your suggestions.
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 7, 2021, 10:01am UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/6 "2021-03-07T10:01:16Z")
thanks! that definitely helps. But have you tried running the sketch by yourself? It won’t run because of the following reasons:
- you declared the sound as `sound_po` but you typed `sound` when you trigger play
- sound file name is wrong when you `loadSound`
- you declared `preload` twice which is problematic because basically the first one will be completely replaced by the second one so the sound won’t be loaded
and do you have any ideas how to implement what I suggested above? I’d love to help but we are not here to do your homework - of course if you tried something and didn’t work, I’m happy to help but first I want to see what you have tried 🙂
---
### Author:  [@Annushka123](https://discourse.processing.org/u/Annushka123)
#### Post date: [March 7, 2021, 1:20pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/7 "2021-03-07T13:20:58Z")
Hi! I’m sorry, that is embarrassing. I sent the wrong sketch code as I was trying to figure out how to share it. I’ve been making copies as I go. This one runs.
[https://editor.p5js.org/saveryanna/sketches/DTHP-PMSn](https://editor.p5js.org/saveryanna/sketches/DTHP-PMSn)
I don’t know how to implement your suggestions, although I have seen examples of isPlaying on the p5.js examples page. If I can’t figure out how to change the sketch in the way I want, I will just use the tools I have already learnt in the course and move on to the next session. This is pretty early on, so hopefully I will have a much deeper understanding of everything by the end. I just wanted to see if it is a quick fix, but clearly I lack some basic knowledge here, so I think it’s best to keep working through the course.
Thanks again for your time and help!! I really appreciate it.
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 7, 2021, 2:51pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/8 "2021-03-07T14:51:38Z")
oh thanks! before looking at it in detail I want to comment that for those who want to help, don’t run the sketch as it is because the repeated `play` can actually crash the browser ☹
---
### Author:  [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [March 7, 2021, 3:09pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/9 "2021-03-07T15:09:28Z")
ok here’s what I meant with the second option:
[https://editor.p5js.org/micuat/sketches/Ab1M7Tc5t](https://editor.p5js.org/micuat/sketches/Ab1M7Tc5t)
basically it doesn’t change the logic, but sets the volume depending on the mouse position. The sounds are looped all the time but as I wrote they need mouse click to start playing (this is because of the browsers preventing from sound to play automatically). It kind of works because the sound is repetitive, but if you want to play the sound from the top every time the cursor enters the region, you need to add a bit more logic as I wrote as the first option.
---
### Author:  [@Annushka123](https://discourse.processing.org/u/Annushka123)
#### Post date: [March 7, 2021, 9:12pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/10 "2021-03-07T21:12:34Z")
Thank you! That’s really super helpful.
---
### Author:  [@Mattyjak](https://discourse.processing.org/u/Mattyjak)
#### Post date: [January 23, 2022, 10:30pm UTC](https://discourse.processing.org/t/playing-sound-files-in-p5-js/28286/11 "2022-01-23T22:30:56Z")
Use an if statement as a super lazy fix:
```auto
if (mouseX > 600 && mouseX <700){
if(!sound_out.playing){
//I can’t remember if it’s a built in Boolean if it’s sound.isPlaying(); try both
sound_out.play();
}
} else {
sound_out.stop();
}
```