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

**URL:** <https://discourse.processing.org/t/tone-js-embedded-presentation-does-not-work-in-chrome-browser/25046>\
**Category:** Libraries\
**Created:** [October 30, 2020, 12:06pm UTC](https://discourse.processing.org/t/tone-js-embedded-presentation-does-not-work-in-chrome-browser/25046 "2020-10-30T12:06:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cpt.credible](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cpt.credible/32/10964_2.png) [@cpt.credible](https://discourse.processing.org/u/cpt.credible)\
**Post date:** [October 30, 2020, 12:06pm UTC](https://discourse.processing.org/t/tone-js-embedded-presentation-does-not-work-in-chrome-browser/25046/1 "2020-10-30T12:06:40Z")

</div>

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:

> **[p5.js Web Editor](https://editor.p5js.org/luisa/sketches/BJFhlPFYX)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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](https://editor.p5js.org/lucwhite/sketches/HuPAIWpM1)  
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.

---

<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:** [October 30, 2020, 12:36pm UTC](https://discourse.processing.org/t/tone-js-embedded-presentation-does-not-work-in-chrome-browser/25046/2 "2020-10-30T12:36:19Z")

</div>

- [Reference](http://p5js.org/reference/#/p5/userStartAudio)
- [Reference](http://p5js.org/reference/#/p5/getAudioContext)

> [@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:** ![cpt.credible](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cpt.credible/32/10964_2.png) [@cpt.credible](https://discourse.processing.org/u/cpt.credible)\
**Post date:** [October 30, 2020, 8:47pm UTC](https://discourse.processing.org/t/tone-js-embedded-presentation-does-not-work-in-chrome-browser/25046/3 "2020-10-30T20:47:21Z")

</div>

> [@Pls critique my code!](https://discourse.processing.org/t/pls-critique-my-code/12855/2):
>
> ## index.html:
> 
> ```auto
> 
> ```

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:

> **[p5.js Web Editor](https://editor.p5js.org/CaptainCredible/sketches/mvwIH-F5e)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

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

> **[p5.js Web Editor](https://editor.p5js.org/CaptainCredible/sketches/v0eQoicOU)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

what am I doing wrong?

---

<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:** [October 30, 2020, 9:32pm UTC](https://discourse.processing.org/t/tone-js-embedded-presentation-does-not-work-in-chrome-browser/25046/4 "2020-10-30T21:32:50Z")

</div>

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?

- [p5js.org/reference/#/p5/preload](http://p5js.org/reference/#/p5/preload)

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

---

<div class="post-metadata">

**Author:** ![cpt.credible](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cpt.credible/32/10964_2.png) [@cpt.credible](https://discourse.processing.org/u/cpt.credible)\
**Post date:** [November 12, 2020, 11:11am UTC](https://discourse.processing.org/t/tone-js-embedded-presentation-does-not-work-in-chrome-browser/25046/5 "2020-11-12T11:11:47Z")

</div>

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](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/](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???

---

<div class="post-metadata">

**Author:** ![cpt.credible](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/cpt.credible/32/10964_2.png) [@cpt.credible](https://discourse.processing.org/u/cpt.credible)\
**Post date:** [November 12, 2020, 11:24am UTC](https://discourse.processing.org/t/tone-js-embedded-presentation-does-not-work-in-chrome-browser/25046/6 "2020-11-12T11:24:20Z")

</div>

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