1

How could I implement sound in my Processing sketch that works when I export the sketch to JavaScript?

I've written a sketch in Processing that includes two audio (.wav) loops. These loops are played through the Movie class upon mousePressed() and mouseDragged(). The sketch works in normal/Java mode, but does not load when changed to JavaScript mode. The sketch only works in JavaScript mode when I remove the sound.

I've noticed that other sketches that use the Movie class as well as sketch examples of libraries such as Minim fail to load when I export them to JavaScript, so I think it's a problem with my implementation rather than the actual code.

I plan to ultimately use the sketch through Safari on an iPad.

Thanks in advance.

Danny
  • 475
  • 6
  • 19

1 Answers1

2

For minim, you can use a relatively simple shim such as https://github.com/Pomax/Pjs-2D-Game-Engine/blob/master/minim.js - include it as a normal JS script on your page before loading any sketches, and your sketch won't complain that minim is an unknown thing.

Because Processing.js compiles your sketch to native JavaScript, global objects like Minim can simply be emulated in JavasScript as well: as long as the functions you're calling for Minim are defined in your JS "shim", things should work just fine.

On a more general note, because Processing libraries are precompiled Java VM byte code, Processing.js cannot load them, so any import statement is ignored.

Mike 'Pomax' Kamermans
  • 49,297
  • 16
  • 112
  • 153
  • Thanks Mike. I'm now using Minim for the audio. It works in normal/Java mode, but still doesn't work in JavaScript mode. I've made sure to add the minim.js and reference it in the index.html, and change the .pde code to match that of the shim — so all the functions I'm calling for Minim are defined in the JS shim (e.g. `trigger()` changed to `play()`, `AudioSample` changed to `AudioPlayer`). I've also followed what this person has done — they seem to have got the wrapper to work: http://www.dineyin.com/ChickenCrossing/. Am I missing something simple? Thanks again. – Danny Jun 03 '13 at 10:24
  • your page loads minim.js twice, which is not actually a problem, but still something you want to fix. You also want to get rid of that IE conditional code - just use actual JS feature testing: ``. You also only need one @pjs preload="image1, image2, image3, etc". Then for the actual answer: it works fine in Chrome and Firefox, but not IE, which doesn't support .ogg - the shim tries .mp3 and .ogg depending on what's supported, so just add .mp3 copies as well and it should work. – Mike 'Pomax' Kamermans Jun 03 '13 at 14:27
  • Thanks for your help. I've got Minim working now in the browser. – Danny Jun 05 '13 at 07:59