# Audio Example not working

**URL:** <https://discourse.processing.org/t/audio-example-not-working/14188>\
**Category:** Libraries\
**Created:** [September 25, 2019, 12:18am UTC](https://discourse.processing.org/t/audio-example-not-working/14188 "2019-09-25T00:18:52Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 25, 2019, 12:18am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/1 "2019-09-25T00:18:52Z")

</div>

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/](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/](http://www.philspitler.com/bonfirelabs/amplified/)

 ![25%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5a10012f44bede2e2b5a55fc8104b48799230d2d.png)

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?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 25, 2019, 5:11am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/2 "2019-09-25T05:11:15Z")

</div>

> [@Pls critique my code!](https://discourse.processing.org/t/pls-critique-my-code/12855/2):
>
> Not at all! Callback preload() is the single best place to load assets. star_struck BtW, you’ve got some missing indentation on your posted code. woozy_face We can use [Beautifier.io](http://Beautifier.io) in order to clean up our JS code. wink Here’s my own take on your sketch (Warning: Not fully tested!): sunglassesindex.html: \<!DOCTYPE html\> \<meta charset=utf-8\> \<meta name=viewport content=width=device-width,initial-scale=1\> \<script defer src=https://cdn.JsDelivr.net/npm/p5\>\</script\> \<script defer s…

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 25, 2019, 5:34am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/3 "2019-09-25T05:34:38Z")

</div>

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

Cheers

Phil

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 25, 2019, 5:40am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/4 "2019-09-25T05:40:39Z")

</div>

[p5js.org/reference/#/p5.sound/getAudioContext](http://p5js.org/reference/#/p5.sound/getAudioContext)

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 25, 2019, 5:59am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/5 "2019-09-25T05:59:14Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 25, 2019, 6:07am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/6 "2019-09-25T06:07:24Z")

</div>

> [@philspitler](#):
>
> I’m curious why I would need this code but the example I copied doesn’t.

[https://github.com/processing/p5.js-sound/issues/249](https://github.com/processing/p5.js-sound/issues/249)

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 25, 2019, 6:36am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/8 "2019-09-25T06:36:10Z")

</div>

@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/](http://www.philspitler.com/bonfirelabs/amplified/)

Any ideas?

Thanks

Phil

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 25, 2019, 6:53am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/9 "2019-09-25T06:53:51Z")

</div>

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

 ![p5jserror](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a1a58c80b003ab1c6b75aa3fb727092726e54d70.png)

* * *

-b- for work with p5.js it is recommended to use a ( test ) account at  
[https://editor.p5js.org/](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.

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 25, 2019, 7:04pm UTC](https://discourse.processing.org/t/audio-example-not-working/14188/10 "2019-09-25T19:04:16Z")

</div>

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/](http://www.philspitler.com/bonfirelabs/amplified/)

OSX 10.14  
Chrome 76.0

Any ideas how to get round that issue?

Thanks.  
Phil

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 25, 2019, 7:30pm UTC](https://discourse.processing.org/t/audio-example-not-working/14188/11 "2019-09-25T19:30:16Z")

</div>

> [@philspitler](#):
>
> 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

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

* * *

from win10 Firefox i see

```auto
    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:

```auto
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?

```auto
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

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 25, 2019, 8:13pm UTC](https://discourse.processing.org/t/audio-example-not-working/14188/12 "2019-09-25T20:13:57Z")

</div>

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

.

 ![38%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2767e126164432236425abc51e42c4ba01d27ab7.png)

And in Firefox on OSX I get the same error.

 ![51%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1ff7fcab254f6ca90919740ca2c124b937877016.png)

.

Phil

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 25, 2019, 8:37pm UTC](https://discourse.processing.org/t/audio-example-not-working/14188/13 "2019-09-25T20:37:48Z")

</div>

I updated my server to add SSL and tried

[https://www.philspitler.com/bonfirelabs/amplified/](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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/29457d213c23e8e0d241a202d24a6e13b612b3f6.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 26, 2019, 1:13am UTC](https://discourse.processing.org/t/audio-example-not-working/14188/14 "2019-09-26T01:13:57Z")

</div>

yes, now here  
win10 firefox OK:

```auto
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

```auto
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

```auto
function touchStarted() {
  if (getAudioContext().state !== 'running') {
    getAudioContext().resume();
  }
}

```

---

<div class="post-metadata">

**Author:** ![philspitler](https://avatars.discourse-cdn.com/v4/letter/p/f1d935/32.png) [@philspitler](https://discourse.processing.org/u/philspitler)\
**Post date:** [September 26, 2019, 9:57pm UTC](https://discourse.processing.org/t/audio-example-not-working/14188/15 "2019-09-26T21:57:00Z")

</div>

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

Thanks again,.

Phil

---

<div class="post-metadata">

**Author:** ![everythingability](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/everythingability/32/937_2.png) [@everythingability](https://discourse.processing.org/u/everythingability)\
**Post date:** [September 28, 2019, 4:45pm UTC](https://discourse.processing.org/t/audio-example-not-working/14188/16 "2019-09-28T16:45:37Z")

</div>

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

```auto
  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…

```auto
function mouseClicked(){
   if (getAudioContext().state !== 'running') {
    getAudioContext().resume();
  }
}

```

---

<div class="post-metadata">

**Author:** ![everythingability](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/everythingability/32/937_2.png) [@everythingability](https://discourse.processing.org/u/everythingability)\
**Post date:** [September 28, 2019, 4:46pm UTC](https://discourse.processing.org/t/audio-example-not-working/14188/17 "2019-09-28T16:46:09Z")

</div>

Ah. Late to the party.