Physion is now equipped with audio support, thanks to the integration of the Tone.js library. In this blog post, we'll briefly explain what Tone.js is and how you can use it to enhance your Physion projects with audio.
While most of Physion's features are easily accessible through a user-friendly graphical interface, audio support, at least for now, is accessible exclusively through scripting. This means that you won't find a convenient UI tool for adding an "audio component" to your scenes. Instead, you'll need to import the audio library into your scripts and use it to create various sounds and audio effects. Let's dive into the process.
Tone.js
Before we explore how to use Tone.js in your scripts, let's briefly introduce the library.
Tone.js is a JavaScript library designed for audio and music creation on the web. It offers a framework for synthesizing and processing sound, making it easier for developers to build interactive music and audio applications directly in the browser.
Basic usage
Let's consider a very basic example of how you can utilize Tone.js in your scripts.
In the following very basic example, we'll create a NodeScript responsible for playing a sound whenever another object collides with it.
class BlipPlayer {
constructor(node) {
this.node = node;
this.initialized = false;
}
async initialize() {
const Tone = await physion.utils.importTone();
this.synth = new Tone.PolySynth(Tone.Synth).toDestination();
}
update(delta) {
if (!this.initialized) {
this.initialize();
this.initialized = true;
}
}
onBeginContact(bodyNode, contact) {
if (this.synth && contact.IsTouching()) {
this.synth.triggerAttackRelease("C4", "32n");
}
}
}
Let's break down what this NodeScript does:
As with all NodeScripts, the constructor is called with one argument: the Node that the script is
going to be attached to. It's the responsibility of the script to store a reference to this Node so
that a later time it can reference it. Also, in the constructor we're initializing a data member named
initialized to false to denote that the script hasn't yet initialized.
As the name suggests, the initialize method is responsible for initializing the NodeScript. In this particular case, we need to import the Tone.js library and when this is done then create our synth object. Later on we'll use the synth object to play our sounds.
In the update method, we simply check if we have already initialized and if not then we call our initialize method.
Finally, in the onBeginContact method we check if the contact is touching and if we have already
created our synth and if both of these conditions are true then we go ahead and play a note via
our synth object. In this example we're playing the C4 note but any other note could be used instead.
The above example serves as a foundation for understanding how Tone.js can be integrated into your projects, allowing you to create diverse audio experiences within your scenes. As you explore audio support in Physion further, you'll discover many more possibilities for enhancing your creations with audio.
In Tone.js page you can find many more examples on how this library can be used in order to produce various sound effects.
Stay tuned for more in-depth tutorials and creative use cases for audio support in Physion with Tone.js!