I made a simple volume slider
Since there's no volume slider available (yet) for audio objects, and managing volume levels in code can be a pain, I created this simple widget to easily set the volume level for any audio object. I haven't seen something like this in the forum, so I hope this can help anyone who needs it.
Here's a step-by-step breakdown in case anyone needs it:
- Create a new script in the Resources Panel
- Name it something useful (ex: volumeControl)
- Copy / paste the code below to your volumeControl script in the Inspector Panel
- Add your audio files to the Resources Panel
- Create a new audio object in the Objects Panel
- Name it something useful (ex: Background Audio)
- Attach the desired audio file to it
- Create a new empty object in the Objects Panel
- Name it something useful (ex: Background Audio Volume)
- Add a script component to Background Audio Volume
- Attach the volumeControl script to the script component
- Add the Background Audio object to the script
That's it! There's plenty more that could be added to the script (like managing multiple audio sources from one script object), but for basic volume needs this works nicely.
// -----JS CODE-----
//@input Component.AudioComponent audio
//@input float volume = 1.0 {"widget":"slider", "min":0.0, "max":1.0, "step":0.01}
script.audio.volume = script.volume;
Hi Aaron,
Very cool. We'll also add an integrated volume slider in the audio component to the feature request list.
Happy creating!
Natasha
Made a small update to this. It can handle up to five separate sound effects. It's easily extendible to more, but five seems about enough for an average Filter / Lens experience.
Is it possible to dynamically add @input controls? That would make it so you only have what you need, clean up the code, and have everything set up in the for-loop based on how many assets you add to the audioSource array.
// @ui {"widget":"label", "label":"Audio Mixer"}
// @input Component.AudioComponent[] audioSource
// @ui {"widget":"group_start", "label":"Volume Control"}
// @input float volume0 = 1.0 {"widget":"slider", "min":0.0, "max":1.0, "step":0.01}
// @input float volume1 = 1.0 {"widget":"slider", "min":0.0, "max":1.0, "step":0.01}
// @input float volume2 = 1.0 {"widget":"slider", "min":0.0, "max":1.0, "step":0.01}
// @input float volume3 = 1.0 {"widget":"slider", "min":0.0, "max":1.0, "step":0.01}
// @input float volume4 = 1.0 {"widget":"slider", "min":0.0, "max":1.0, "step":0.01}
// @ui {"widget":"group_end"}
// @ui {"widget":"separator"}
attachVolume();
function attachVolume()
{
for(var i = 0; i < script.audioSource.length; i++)
{
switch(i)
{
case 0:
script.audioSource[i].volume = script.volume0;
break;
case 1:
script.audioSource[i].volume = script.volume1;
break;
case 2:
script.audioSource[i].volume = script.volume2;
break;
case 3:
script.audioSource[i].volume = script.volume3;
break;
case 4:
script.audioSource[i].volume = script.volume4;
break;
}
}
}
Hi Aaron, currently you can not dynamically add inputs.
The @input system does have some simple conditional logic that you could exploit for hiding elements. In the below guide, check out showIf and showIfValue.
https://lensstudio.snapchat.com/guides/scripting/custom-script-ui/
This will allow you to show and hide elements if something is true or if something is matching a value.