I have tried .ogg, .m4a, .mp3, everything. any suggestions?
Give your code, and we will probably can help you…Without anything, we can’t know what’s wrong.
First, did you store yours audio files in a correct folder and give the path to find it in your code ?
Did you load p5 Sounds librairies ?
Did you load yours song in a Preload function ?
Which browser are you using?
Chrome won’t let you access files on your computer, but Firefox will.
var img;
var sound;
var ellipsex = 200
var ellipsey = 330
var swordX = -909999
var swordY = 260
var cooldownx = 0
var obst1X = 160
var obst1Y = 25
var rip = -9999
function preload() {
soundFormats('m4a','mp3','ogg')
sound = loadSound('assets/untitled_1087.mp3');
}
function setup() {
createCanvas(400, 400);
img = loadImage("assets/genji.png");
ellipseMode(CENTER)
rectMode(CENTER)
imageMode(CENTER)
}
function draw() {
background(255,51,153);
obst1Y = obst1Y + 2.5
textSize(20);
noStroke()
fill('pink')
fill('blue');
//player
//ellipse(ellipsex,ellipsey,70,70);
//genji
image(img,ellipsex,ellipsey);
img.resize(200,100)
//sword
fill(0)
rect(swordX,swordY,60,10)
//cooldown
text('COOLDOWNS:',0,20)
fill(0,204,51)
rect(cooldownx,40,120,10)
//obstacles
fill(153, 0, 153)
rect(obst1X,obst1Y,75,75)
// endgame rectangle
rect(rip,0,10000,10000)
//if ellipse is offscreen
if (ellipsex < -35) {
ellipsex = width + 35
}
if (ellipsex > width + 35) {
ellipsex = -35
}
//sword appears
if (mouseIsPressed == true) {
if (mouseButton == LEFT) {
if (cooldownx > -55) {
swordX = ellipsex + 5
sound.setVolume(0.1)
sound.play()
sound.rate(1)
}
if (cooldownx < -55) {
swordX = -9999
}
cooldownx = cooldownx -1
}
}
if (mouseIsPressed == false) {
frameRate(60)
swordX = -99999
if (cooldownx < 0) {
cooldownx = cooldownx + 0.5
}
}
//player movement
if (key==='a') {
ellipsex = ellipsex - 2
}
if (key==='d') {
ellipsex = ellipsex + 2
}
//if the obstacle hits the player
if (ellipsex > obst1X - 37.5 && ellipsey + 35 < obst1Y + 37.5 && ellipsex + 35 < obst1X + 37.5 && ellipsey > obst1Y - 37.5) {
ellipsey = obst1Y
rip = 0
}
// if the sword hits the obstacle
if (swordY < obst1Y + 25 && swordY > obst1Y - 25 && swordX > obst1X - 25 && swordX < obst1X + 25) {
obst1Y = -9999
}
// if deflect is used
}
yes. it’s in prototype though. I have a local server, I have loaded it into the sketch, so it should work.
You are getting the distortion due to calling sound.play inside of draw … it essentially wants to play that sound 30-60 times per second. If you really need to call it inside of draw, wrap it in a conditional checking if the sound is not already playing, if so, play sound.
if (!sound.isPlaying()) {
sound.play();
}
1 Like
thank you! that is solved. however, I want another sound to stop looping after it plays once.
if (rip > -50) {
if (defeat.isPlaying() == false) {
defeat.setVolume(1)
defeat.play()
defeat.rate(1)
}
}
I assume that you want sound Y to stop playing as soon as sound X finishes.
Stopping a sound when another finishes shouldn’t be too hard. Let me try some pseudocode…
//Outside of draw()...
var soundYShouldStop = false;
function draw(){
...
//...Whereever you put soundX.play(); function...
soundX.play();
soundYShouldStop = true; //Add this.
//.....
//At one point in draw() so that this runs every frame
if(soundX.isPlaying() == false & soundYShouldStop == true){ //After soundX has finished playing, stop soundY.
soundY.stop();
soundYShouldStop = false;
}Hi - I actually want to know whether I can stop soundX after playing once. since I have to say if (soundX.isPlaying()==false) because draw will play it 60 times per second, how do I get it to stop after one time through?
Oh. Simple! Let me try doing it with your code related to the defeat sound.
Basically, as soon as you want the sound to play, you let it know about it once by using multiple boolean values.
boolean defeatAllowedToPlay = true; //Let it play the first time when it wants to
void draw() {
...
if (rip > -50) {
if (defeat.isPlaying() == false && defeatAllowedToPlay == true) {
defeat.setVolume(1);
defeat.play();
defeat.rate(1);
defeatAllowedToPlay = false;
}
} else { //i.e. if rip <= -50
defeatAllowedToPlay = true;
}
...
As soon as the rip>-50 condition to actually play the sound is met, it plays it once and instantly disallows it to play again.
Only as soon as that condition is not met, we allow the sound to play again - which it wouldn’t as that condition is not met, i.e. it would only allow playing the sound only as soon as rip>-50 is met again.
In other words, you can use the defeatAllowedToPlay variable to know if rip>-50 was true or not in the previous draw() cycle, to know if it ever played the sound or not.
1 Like
I tried this. The sound didn’t play at all! I think it’s because the sound is longer than one draw cycle.
do we always have to upload the sound file into p5.js sketch files?
What’s the best way to upload big file? larger than 22 mb.
Hi @slow_izzm ,
I was wondering if you could suggest a function for sound.play other than draw or mousePressed? I’m having a similar issue and I want the sound to play while mouseX is hovering in certain parts of the sketch but the sound id awful coming from within the draw function.
Many thanks,
Anna
Same answer as above … you can invoke sound.Play() from any function or method but you still need to check if the sound is already playing so it doesn’t play another instance of it.
When it comes to triggering the sound on/while hovering then you just need a bool that keeps track of the hover state …
2 Likes
wow. thank you! that was super helpful.
1 Like