CODEWITHSUNDEEP
javascriptgoogle-chromenetwork-programmingmicrosoft-edgep5.js
Jan Koželuh
Jan Koželuh

Reputation: 13

Error from p5.sound in browser when it is hosted via HTTP?

I use p5.js in my school project and it does not work in Google Chrome(also Microsoft Edge, idk about Opera), with JavaScript activated, but only when its on hosting. When I got it on Localhost it works just fine. In Mozilla it works in both situations. Iam confused.

http://klauzury2c2021.8u.cz/ you can find all of the code on the site

error screenshot

head of html code

Upvotes: 1

Views: 1165

Answers (1)

Paul Wheeler
Paul Wheeler

Reputation: 20170

It looks like you are are hitting this issue with the p5.Sound library that prevents it from working correctly when loaded over http. Since you're hosting your site on a public server the best solution would be to enable HTTPS for your server and have HTTP requests redirect to the HTTPS url. However if you are unable to do this you can make this work with an AudioWorklet polyfill. Just add the following line to the head of your html file:

  <script src="https://unpkg.com/@free-side/audioworklet-polyfill/dist/audioworklet-polyfill.js" type="text/javascript"></script>

Updated ↑ Old Answer ↓

I originally misread your question and though you were specifically struggling with testing on localhost. Here are instructions for cases where you are testing with a local server:

Apparently people have had success working around the issue using a tool called ngrok. Which allows you to expose a local service via a public HTTPS endpoint. So if you're running a local HTTP server on port 3000 you would open a terminal and run ngrok http 3000 (having followed the basic installation and setup steps for ngrok). Nrok will assign you a public URL, which it will display in a message to the terminal like this:

Forwarding                    https://<UNIQUE_ID_HERE>.ngrok.io -> http://localhost:3000

Then instead of accessing your sketch page via http://localhost:3000/ you can access it via https://<UNIQUE_ID_HERE>.ngrok.io/ and that should work around this p5.sound issue.

Upvotes: 1

Related Questions