"no content type found for .mp3" error

p5.js Libraries
1

Howdy all,

I’m trying to work with the example at reference | p5.js but

  • clicking on the canvas to start/pause the audio inexplicably only works once for each state

  • the sketch only executes once, thereafter failing with the error “no content type found for .mp3”

Using version 4 Beta 5 of Processing on M1 Pro 14" MacBook.

Thanks in advance,
Carl J.

2

Here’s all the code (hope this works)…
Index.html has the proper invocations for SVG and p5.sound.

let theSound;

function onSoundLoadSuccess(e){
   console.log("load sound success",e);
}
function onSoundLoadError(e){
   console.log("load sound error",e);
}
function onSoundLoadProgress(e){
   console.log("load sound progress",e);
}

function preload() {
  soundFormats('mp3', 'ogg');
  theSound = loadSound('breaths.mp3');
}

function setup() {
  let cnv = createCanvas(displayWidth, displayHeight, SVG);
  cnv.mouseClicked(togglePlay);
  fft = new p5.FFT(0.8, 2048);
  theSound.amp(0.2);
}


function draw() {
  background(20);
  let spectrum = fft.analyze();
  noStroke();
  fill(255, 0, 255);
  for (let i = 0; i< spectrum.length; i++){
    let x = map(i, 0, spectrum.length, 0, width);
    let h = -height + map(spectrum[i], 0, 255, height, 0);
    rect(x, height, width / spectrum.length, h );
  }

  let waveform = fft.waveform();
  noFill();
  beginShape();
  stroke(20);
  for (let i = 0; i < waveform.length; i++){
    let x = map(i, 0, waveform.length, 0, width);
    let y = map( waveform[i], -1, 1, 0, height);
    vertex(x,y);
  }
  endShape();
}

function togglePlay() {
  if (theSound.isPlaying()) {
    theSound.pause();
  } else {
    theSound.loop();
  }
}
3

—Oh, and Firefox 97.0.1.

4

You might have better luck in p5.js web editor (Chrome browser). The following changes to your code worked on my system:

function preload() {
  soundFormats('mp3', 'ogg');
  //theSound = loadSound('breaths.mp3');
  theSound = loadSound('assets/Damscray_DancingTiger.mp3');
}

function setup() {
  let cnv = createCanvas(displayWidth, displayHeight);
  cnv.mouseClicked(togglePlay);
  fft = new p5.FFT(0.8, 2048);
  theSound.amp(0.2);
}

Set up a folder called ‘assets’ then drag’ndrop your mp3 file to upload it to the folder. Add the sound script to index.html as the reference states. I dropped ‘SVG’ because I didn’t know what it was.

output:

out
out1564×1364 230 KB

5

Thanks for the response!

I’d already tried the web editor but could find no way to upload assets. I don’t run Chrome for privacy reasons.

Unfortunately, I’m trying to bootstrap into an NFT, and the web editor and its assets will not be accessible there.

6

Click the down arrow beside ‘Sketch Files’ and select ‘Upload file’ from the drop down menu. That will display a dragNdrop window for you to upload your file.

upload
upload880×408 41.6 KB

7

I finally got it to run in Processing IDE using original posted code with these modifications:

function preload() {
  soundFormats('mp3', 'ogg');
  theSound = loadSound('data/Damscray_DancingTiger.mp3');
}

function setup() {
  let cnv = createCanvas(displayWidth, displayHeight);
  cnv.mouseClicked(togglePlay);
  fft = new p5.FFT(0.8, 2048);
  theSound.amp(0.2);
}
  1. Create a folder called ‘data’ in your sketch folder and copy/paste your .mp3 file.
  2. Make sure ‘p5.sound.js’ is in the libraries folder that is inside of your sketch folder. You may have to copy/paste that also.
  3. Make sure index.html script points to the sound file as shown in the reference.
  4. Again I had to delete ‘SVG’ because I have no idea what it is.
8

Thanks! I appreciate your taking the time to help.

The error, alas, did not go away after reorganizing the sketch directory (and clearing out cruft) but I was able to work around it by switching to Ogg Vorbis.

What’s intriguing is that I swear the same code did work on two occasions with the MP3 file before the error message started appearing instead…

Again, thanks for your efforts, they helped me resolve my situation.

9

Note: “Upload file” does not appear on this menu in Firefox.

10

I don’t see it in Safari either. Were you able to upload the .mp3 file to the p5.js web editor some other way?

11

Nope.

EXTRA_CHARACTERS_TO_ENABLE_REPLY

12

Maybe it’s a security feature. OpenProcessing.org has a way to upload files (at least it does on my system).