Hear the mp3's triggered by minim library after the .pde file and sounds are uploaded to my website

Snapper4298

I'm fairly new to processing and I have referenced the problem I'm having. I've not found a fix so thought I'd try you people with more experience in the hope of some pointers. Any feedback is really appreciated and thanks for taking the time to review it.

I've written a sketch in processing3 on Windows XP which uses the minim library to trigger different sounds on each wall the ball bounces off. The sketch works perfectly when compiled by the processing application. However, when I upload the .pde sketch to my website, the .pde does not run. The .pde is loaded having checked in the console and there are no errors reported. When I upload the .pde without the minim library, the sketch runs fine on the uploaded version. See example here of the code on my site that does not use the minim library: http://www.stezzer.com/ball.html which works fine without the minim stuff. It's only when I add the minim stuff does it fall down.

Here is the processing code of the sketch in ball.html: with the minim stuff commented out

/**import ddf.minim.*;
Minim minim;
AudioSample simon1; // sound1
AudioSample simon2; // sound2
AudioSample simon3; // sound3
AudioSample simon4; // sound4
*/

int purple = 0; // RgB value of background colour flash in purple
int mode = 0; // selector to trigger which wall ball hits
int dX = 1; // X direction of ball
int dY = 1; // Y direction of ball
int stepsX = 400; //start X position of the ball
int stepsY = 200; //start Y position of the ball
float speedX = 5.4; // X speed ball travels at
float speedY = 2.5; // Y speed ball travels at
int diameter = 7; // size of ball

void setup() {
  size(600, 400);
  background(0);
  fill(255);

/** minim = new Minim(this);
   simon1 = minim.loadSample("http://stezzer.com/simon.mp3", 512);
   simon2 = minim.loadSample("http://stezzer.com/simon1.mp3", 512);
   simon3 = minim.loadSample("http://stezzer.com/simon2.mp3", 512);
   simon4 = minim.loadSample("http://stezzer.com/simon3.mp3", 512);
*/
}

void draw() {
  background(0);
  if (purple > 1) flash(); // trigger the purple flash animation 
  float ranX = random(0, .15);  // X speed increment
  float ranY = random(0, .15);  // Y speed increment
  if (stepsX > width - (diameter / 2)) {dX = -1; speedX += ranX; speedY += ranY; mode = 1; // simon1.trigger(); // if ball hits right hand wall, change direction X, speed and trigger sound 1
}

  if (stepsX < diameter / 2) {dX = 1; speedX += ranX; speedY += ranY; mode = 2; // simon2.trigger(); // if ball hits left hand wall, change direction X, speed and trigger sound 2
}

  if (stepsY > height - (diameter / 2)) {dY = -1; speedY += ranY; speedX += ranX; mode = 3; // simon3.trigger();} // if ball hits bottom wall, change direction Y, speed and trigger sound 3
}
  if (stepsY < diameter / 2) {dY = 1; speedY += ranY; speedX += ranX; mode = 4; // simon4.trigger();} // if ball hits top wall, change direction Y, speed and trigger sound 4
}
  int absX = int(speedX); // get the integer value of SpeedX
  int absY = int(speedY); // get the integer value of SpeedY

  stepsX = stepsX + absX * dX; // move ball in X direction
  stepsY = stepsY + absY * dY; // move ball in Y direction

  ellipse (stepsX, stepsY, diameter, diameter);  // draw the ball

  if (mode == 1) {purple = 200; mode = 0;} // if bouncing off wall 1
  if (mode == 2) {purple = 200; mode = 0;} // if bouncing off wall 2
  if (mode == 3) {purple = 200; mode = 0;} // if bouncing off wall 3
  if (mode == 4) {purple = 200; mode = 0;} // if bouncing off wall 4

  }

void flash() {
  background(purple, 0, purple); // updates background purple colour
  if (purple < 5) mode = 0; // has purple become black ?
  else purple -= 5; // fade the purple background by 5
}

I've commented out the minim stuff to show you the actual code uploaded on my site. If you un-comment out the minim stuff, the sketch only works on the compiled version at home, not at the visited website link above. If you put my code into processing and un-comment the minim stuff, you'll hear a selected beep tone (mp3) each time the ball hits a wall.

Any help with this would be really appreciated.

kfrajer

You are using Processing.js and I believe this transpilation process doesn't allow to use any external libraries. It is simply not supported from what I understand. You should consider writing your code directly in javascript using p5.js

Kf

quark

The minim library, like many of the contributed libraries were created with Java (not JavaScript) so with the death of applets, this library cannot be used in a web-page.

Snapper4298

Thank you for your feedback. Much appreciated.

Snapper4298

I will try this in p5 and see how I go. Really appreciate your suggestion and feedback thank you

GoToLoop

1. https://GitHub.com/processing/p5.js/wiki/Processing-transition
2. https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class
3. https://p5js.org/reference/#/libraries/p5.sound

Snapper4298

Thanks for these links. I started out with p5 and went off into processing more deeply. So whilst the instruction set is very similar I'm realising I should have gone with p5 for what I'm trying to do. Thank you for your valued feedback I really appreciate it and will go back to p5 to experiment and learn how to get this minim stuff playing and try the sound library too.