Tone.js embedded/presentation does not work in Chrome browser

p5.js Libraries
1

Hi, I am having trouble getting a sequencer to run when embedded on a site in Chrome.

E.G. this sketch runs fine in the editor:

but when you try to embed or run it in presentation mode on chrome, the play button stops working:

it does work in edge and firefox though

Most examples I have found using Tone.js stop working when embedded, but this example: p5.js Web Editor
also works in chrome embedded or in presentation mode. However I can’t figure out why.

I have a hunch this has something to do with the browser not allowing AudioContext to start without user interaction. The tone.js documentation suggests the following:

IMPORTANT : Browsers will not play any audio until a user clicks something (like a play button). Run your Tone.js code only after calling Tone.start() from a event listener which is triggered by a user action such as “click” or “keydown”.

I don’t know enough about html and web development to understand what this means though. Is this something i need to do in the HTML file?

Any help figuring out how to make the first example run embedded on a webpage in chrome would be greatly appreciated.

2
1 Like
3

Thanks for the useful reply! I managed to get the code you posted to work, and veified that it would make sound after the mouse has been clicked:

But I couldn’t manage to use the same principle to get my sketch working.

what am I doing wrong?

4

Unfortunately my knowledge about the p5.sound library don’t go much further than what is present on my sound example sketch.

Perhaps you should use the preload() callback in order to load your sounds too?

Also your “index.html” seems to be loading some libraries twice and/or older versions.

1 Like
5

Ok I am pulling my hair out here trying to get this to work.
Made a simpler example to just test the Tone.Transport.start() and made an eventlistener as described in the documetation for Tone.js : https://editor.p5js.org/CaptainCredible/sketches/79pD_GZ8R

but i still can’t get it to run in chrome anywhere but p5.js editor.
Here is the same code on my server:
https://www.captaincredible.com/SEQ/ttest/

Can anybody manage to get this snippet to work ?

The tone.js documentation tells me to call Tone.start() from an eventlistener before anything else, but Tone.start() doesn’t seem to exist in the library???

6

SOLUTION!
I added this line and it now works:
document.querySelector(“button”).addEventListener(“click”, () => Tone.context._context.resume());

seems like you can call the Tone.context._context.resume() from e.q. touchStarted() or mouseClicked() instead if you like