Suppress Tone.js console logs on start: `%c * Tone.js v15.0.2 * background: #000; color: #fff`

[SableRaf]

When using p5.sound, the following message is logged to the console on start:

%c * Tone.js v15.0.2 *
background: #000; color: #fff

This comes from Tone.js and can be silenced by setting window.TONE_SILENCE_LOGGING = true (see Tonejs/Tone.js#155).

I suggest silencing this log to avoid confusion, especially for new users to the library.

[ogbabydiesal]

this sounds good to me - i think tone is sufficiently acknowledged i the readme so that should be cool

[lvdopqt]

Hello! I added window.TONE_SILENCE_LOGGING = true at the top of app.js since it's the main entry point and runs early, before Tone.js is loaded. See the commit.
I thought about other options like setting it inside a function or during some setup step, but adding it directly to app.js felt more explicit and makes it clear to anyone reading the code that we're intentionally silencing the log from the start.

[lvdopqt]

Added and example here for the lib initializing without the tone message

[ogbabydiesal]

super weird - i tried this exact same approach but did not work for me - trying again and i still see the logging in the console? what am i missing here 🤔

[lvdopqt]

can you share which browser you're using?
In this example I'm using Chrome Version 135.0.7049.85 (Official Build) (arm64)

[ogbabydiesal]

oh I see - can you test it outside of the p5 editor? - the Tone Version logging doesn't happen in the editor for whatever reason - not even in the current library.

but i'm using Arc Version 1.91.0 (61725) (Chromium Engine Version 135.0.7049.96) but was also testing it in safari.

[lvdopqt]

It's indeed strange haha I'm using a built version (without this change) here in the editor 🤪

But you're right! Outside of the editor the banner remains!

I'll investigate!

[lvdopqt]

After some investigation I got what is happening!
Rollup follows the ES module specification, which mandates that all import statements are hoisted to the top of the module scope (references ¹, ², ³). This means:
The execution of the imported modules happens before any other top-level code in the file.
Even if you write code like this:

window.TONE_SILENCE_LOGGING = true;
import Tone from 'tone';

Rollup (and all ES module bundlers) will treat it as if the import comes first. Internally, the bundle behaves like:

import Tone from 'tone';
window.TONE_SILENCE_LOGGING = true;

This leads to unexpected side effects when a dependency (like Tone.js) runs initialization code immediately on import, such as logging to the console — before the flag is set.

I've tried some solutions, but the only one that worked so far was using patch-package and postinstall to overwrite Tone.js Global.js file version removing the version banner, although I think it's a dirty approach. Example bellow:

// tone+15.0.2.patch

diff --git a/node_modules/tone/build/esm/core/Global.js b/node_modules/tone/build/esm/core/Global.js
index 9253e54..e1d8123 100644
--- a/node_modules/tone/build/esm/core/Global.js
+++ b/node_modules/tone/build/esm/core/Global.js
@@ -62,13 +62,13 @@ export function start() {
 /**
  * Log Tone.js + version in the console.
  */
-if (theWindow && !theWindow.TONE_SILENCE_LOGGING) {
-    let prefix = "v";
-    if (version === "dev") {
-        prefix = "";
-    }
-    const printString = ` * Tone.js ${prefix}${version} * `;
-    // eslint-disable-next-line no-console
-    console.log(`%c${printString}`, "background: #000; color: #fff");
-}
+// if (theWindow && !theWindow.TONE_SILENCE_LOGGING) {
+//     let prefix = "v";
+//     if (version === "dev") {
+//         prefix = "";
+//     }
+//     const printString = ` * Tone.js ${prefix}${version} * `;
+//     // eslint-disable-next-line no-console
+//     console.log(`%c${printString}`, "background: #000; color: #fff");
+// }
 //# sourceMappingURL=Global.js.map
\ No newline at end of file

I've commited it here for you to take a look lvdopqt@fb37912

[lvdopqt]

One thing that could lead us to understanding and doing the right implementation for that would be getting how the p5.js-sound lib does. As we can see here it imports Tone.js and it does the flag setting to true here. But I didnt get yet how it's using the global scope there!