Audio Example not working

p5.js Libraries
1

Hi, I’m a total noob to p5 although I have done a fair amount of Processing work over the years.

I am trying to get the “hello amplitude” sketch to work but keep getting errors…

I took the files from here.
https://therewasaguy.github.io/p5-music-viz/demos/01_hello_amplitude/

and uploaded them here with modifications to where I put the libraries.
http://www.philspitler.com/bonfirelabs/amplified/

25%20PM
Screen Shot 2019-09-24 at 5.49.25 PM.png1614×658 132 KB

If I press the “T” key to toggle sources I do here the mp3 so it seems like it could be something to do with the microphone input…

Any ideas why I’m getting these errors?

1 Like
2
3

@GoToLoop, it looks like this answer was for another question.

Cheers

Phil

1 Like
4

p5js.org/reference/#/p5.sound/getAudioContext

5

@GoToLoop I’m curious why I would need this code but the example I copied doesn’t.

Unless I’m missing something.

Thanks for all your help

Phil

6

https://github.com/processing/p5.js-sound/issues/249

8

@GoToLoop it looks like I had a different version of the libraries installed on my server.

I swapped them and no longer get any errors but the sketch doesn’t seem to be working.

It should be a black screen with white circle but the screen stays white.

If I toggle the input using the T key the sketch does play the audio file though…

My current iteration is here.
http://www.philspitler.com/bonfirelabs/amplified/

Any ideas?

Thanks

Phil

9

hi Phil,
-a- are you aware of need to look at the console

p5jserror
p5jserror.png1425×547 23.2 KB

-b- for work with p5.js it is recommended to use a ( test ) account at
https://editor.p5js.org/
also very good for reporting problems / asking questions here at the forum
because in seconds we see code, have needed files at hand, see the result
and can play with it…

after all running you can do download & upload to your server…

-c- also you need to report what OS and browser you use to test it.
like with win 10 / Firefox many things not run, Google Chrome better.

1 Like
10

Thanks @kll I really appreciate the info.

The online editor is so much easier than managing multiple library files etc…Thanks,

What’s weird is that my sketch works great in the online editor but I still get the autoplay error error in my console when I run it from my own server.

http://www.philspitler.com/bonfirelabs/amplified/

OSX 10.14
Chrome 76.0

Any ideas how to get round that issue?

Thanks.
Phil

11

one big difference is
online is HTTPS, your server is HTTP

from win10 Firefox i see

    getUserMedia http://www.philspitler.com/bonfirelabs/amplified/p5.dom.min.js:3
    start http://www.philspitler.com/bonfirelabs/amplified/p5.sound.min.js:26
    setup http://www.philspitler.com/bonfirelabs/amplified/sketch.js:22
    _setup http://www.philspitler.com/bonfirelabs/amplified/p5.js:55224
    _runIfPreloadsAreDone http://www.philspitler.com/bonfirelabs/amplified/p5.js:55173
    _start http://www.philspitler.com/bonfirelabs/amplified/p5.js:55159
    p5 http://www.philspitler.com/bonfirelabs/amplified/p5.js:55438
    _globalInit http://www.philspitler.com/bonfirelabs/amplified/p5.js:54830

from win10 chrome:

p5.sound.min.js:26 Error: getUserMedia is not implemented in this browser
    at Object.navigator.mediaDevices.getUserMedia.navigator.mediaDevices.getUserMedia (p5.dom.min.js:3)
    at t.AudioIn.start (p5.sound.min.js:26)
    at setup (sketch.js:22)
    at p5.<anonymous> (p5.js:55224)
    at p5._runIfPreloadsAreDone (p5.js:55173)
    at p5.<anonymous> (p5.js:55159)
    at new p5 (p5.js:55438)
    at _globalInit (p5.js:54830)

so your latest ?change? gives same ERROR here
you see that too on OSX?

var mic, soundFile;
var amplitude;
var mapMax = 1.0;

function preload() {
  // load the sound, but don't play it yet
 //soundFile = loadSound('test.mp3')
}

function setup() {
  c = createCanvas(windowWidth, windowHeight);
  background(0);
  fill(255);
  noStroke();

  mic = new p5.AudioIn();
  mic.start();

  // soundFile.play();

  amplitude = new p5.Amplitude();
  amplitude.setInput(mic);
  // amplitude.smooth(0.8); // <-- try this!
}

function draw() {
  background(0);

  var level = amplitude.getLevel();
  text('Amplitude: ' + level, 20, 20);
  text('mapMax: ' + mapMax, 20, 40);

  // map ellipse height
  var ellipseHeight = map(level, 0, mapMax, height, 0);
  ellipse(width/2, ellipseHeight, 100, 100);
}

but OK from p5.js online editor

2 Likes
12

My latest gives the attached error in Chrome on OSX but not in the P5 online editor in the same browser.

.

38%20PM
Screen Shot 2019-09-25 at 1.12.38 PM.png1842×946 175 KB

And in Firefox on OSX I get the same error.

51%20PM
Screen Shot 2019-09-25 at 1.17.51 PM.png1706×786 134 KB

.

Phil

13

I updated my server to add SSL and tried

https://www.philspitler.com/bonfirelabs/amplified/

I don’t get the error in Chrome any more but do get the warning, see attached…

It seems like it is working correctly in Firefox though.

Thanks

Phil

13%20PM
Screen Shot 2019-09-25 at 1.37.13 PM.png1852×426 65 KB

14

yes, now here
win10 firefox OK:

Use of the orientation sensor is deprecated. p5.js:55419:23
Use of the motion sensor is deprecated. p5.js:55419:23

win 10 chrome NOT OK

p5.sound.min.js:24 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
t.Context @ p5.sound.min.js:24
p5.sound.min.js:24 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu
(anonymous) @ p5.sound.min.js:24

but both ask correctly for usage of mic.

now need to work on the chrome info you got already from GoToLoop
and try like

function touchStarted() {
  if (getAudioContext().state !== 'running') {
    getAudioContext().resume();
  }
}
1 Like
15

This works great, a combination of using https and the code snipet from @GoToLoop makes everything work.

Thanks again,.

Phil

2 Likes
16

Yes. It’s a flippin’ Chrome security feature… You need to start sound after a click… so in your setup maybe have…

  if (getAudioContext().state !== 'running') {
    getAudioContext().resume();
  }

… but I don’t think that actually does anything…

…then… create some interface so that a “click” can happen… You might want to add a “Start” button or something…

function mouseClicked(){
   if (getAudioContext().state !== 'running') {
    getAudioContext().resume();
  }
}
1 Like
17

Ah. Late to the party.