The Soundboard Template - Try It!
We’re excited to share a fun new project template you can use to create your very own soundboard Lens! This Lens template features a set of buttons that each trigger a different sound and popup graphic.
Try a Lens made with the Soundboard Template by visiting this link or scanning this Snapcode:
In this post, we'll walk through all of the template’s features, and explain how you can customize the template to make it your own!
Getting The Template
To get started, download the Soundboard Template here.
Once it's downloaded, unzip the file.
Open it up in Lens Studio by selecting File > Open Project…
Navigate to the folder you just unzipped, select the soundboard_template.lsproj file and select Open.
Exploring The Template
Once you have the project open, you’ll see a set of buttons in the Preview panel. Try clicking on these buttons in the Preview to see what they do.
You should see that each button triggers a different sound and kitty visual.
The Soundboard Keys
The sounds and visuals triggered by the buttons are controlled by a group of SceneObjects. You can see them in the Objects panel, named with the prefix “SoundboardKey_”.
The Trigger Visuals
The Kitty visuals you see popping in after each button press are also SceneObjects, named with the prefix “TriggerVisual_”.
Editing The Template
Adding Custom Sounds
To edit the sound played by a button, start by selecting its corresponding “SoundboardKey_” object in the Objects panel.
The selected object has a SoundboardKey script. You can change the sound it plays by editing the “Audio Track” property on that script component.
To bring in your own audio track, in the Resources panel, select Add New > Import Files.
Adding Custom Visuals
To replace the image displayed on one of the popup visuals, start by selecting its corresponding “TriggerVisual_” object in the Objects panel.
The selected object has a Sprite component. You can change its image by editing the BaseTex property on the Sprite Component.
To bring in your own image, in the Resources panel, select Add New > Import Files.
Updating The Motion
Each of the TriggerVisual objects has its own predefined tweens for entering and exiting the frame. You can adjust these settings by editing the TweenBillboard script components attached to the “TriggerVisual_” objects.
To edit the visual’s start position, edit the “Start” property on the Tween named “show”, and edit the “End” property on the Tween named “hide.” Also, be sure to set the Sprite Aligner’s “Binding Position” property to match this value.
To edit the visual’s end position, edit the “End” property on the Tween named “show”, and edit the “Start” property on the Tween named “hide.”
To learn more about how the Tween system works, visit our documentation on Tweening.
Editing The Buttons
You can change the appearance of the buttons by editing the button’s Material, which you can find in Resources under “Materials.”
You’ll likely only want to adjust the Base Color and Base Texture.
By default, the buttons will be visible in Snaps recorded with your Lens. You can hide them by unchecking the “Show In Recording” checkbox on the SoundboardKey script component.
Previewing The Lens
You're now ready to preview your soundboard as a Lens. To preview your Lens in Snapchat, follow the Pairing to Snapchat guide. Don’t forget to share it with the community - we can’t wait to see what you make!
When adding a sound that is only 1 second long its just not working.
Hi Julien,
Can you please verify what you mean by "not working?" Is the sound not playing when you press a button? As a test, have you tried creating a new Audio Component on a Scene Object and adding the imported sound to it? Does it play then?
Let me know, and we can continue troubleshooting from there.
Thanks,
Peter
Hey Peter,
I want to make a drum soundboard with different sample sounds from drums. All of those sounds are like 0 seconds or 1 second long. I tried to use the template and import those sounds and when I click on the one of the buttons, its 1. Not playing the sound at all + the cat animation is really fast. 2. Its playing but not the whole sound.
I also have a problem with the new 1.5 update, any way I can go back to 1.0 because the Audio.Component API has been changed and my script I used, is not fully working anymore. My main script I used is this:
// -----JS CODE-----
// @input SceneObject[] sceneObjects
// @input Component.AudioComponent[] audioComponents
var audioComponent = null;
var currIndex = -1;
function onTurnOn( eventData )
{
global.touchSystem.touchBlocking = true;
global.touchSystem.enableTouchBlockingException("TouchTypeDoubleTap", true);
global.touchSystem.enableTouchBlockingException("TouchTypeSwipe", true);
for( var i = 0; i < script.sceneObjects.length; i++ ) {
script.sceneObjects[i].enabled = false;
}
}
var turnOn = script.createEvent("TurnOnEvent");
turnOn.bind(onTurnOn);
function onTap( eventData )
{
for( var i = 0; i < script.sceneObjects.length; i++ ) {
script.sceneObjects[i].enabled = false;
}
for( var i = 0; i < script.audioComponents.length; i++ ) {
script.audioComponents[i].stop(false);
}
currIndex++;
if( currIndex >= script.sceneObjects.length ) {
currIndex = 0;
}
// Show scene object
if( script.sceneObjects[currIndex] )
{
script.sceneObjects[currIndex].enabled = true;
}
// Play sound
if( currIndex < script.audioComponents.length && script.audioComponents[currIndex] )
{
script.audioComponents[currIndex].play( 1 );
}
}
var tap = script.createEvent("TapEvent");
tap.bind(onTap);
When I try to add a sound or music to the script, I can't even select it. I'm 100% sure I have imported the account. Is there anyway to fix the script?
Thank you for the help!
Hi Julien,
Thanks for the info. Regarding the playback duration, did you try the test I mentioned in my last message?
You could try padding the duration of the mp3 file you imported with some dead time at the end of the sound. Sometimes mp3 compression will clip very short sounds.
The reason the cat animation is playing quickly is because by default the sprite will only stay on screen for the duration of the audio clip. You can override this behavior by checking the "Use Custom Hold" checkbox on the SoundboardKey script component in the Inspector.
As for your script, I brought it into a project and was able to assign both Scene Objects and Audio Components to the two array properties you defined. What change in the AudioComponent is giving you trouble, exactly?
Thanks,
Peter
Hey Peter,
I'll try your solution for the audio tomorrow and will message you back about how it went.
I'm trying to select an Audio file from my imported files but my sound is not there, there is nothing I can select, not a sound not even a normal file. This problem happend in the newest 1.5 version and not in the 1.0 old version. Where did you put the script to? Maybe I chose the wrong object. The SceneObjects are working and I can select them but I can't select or even find and add Audio to the array. I saw in your script from the soundboard template that you used Asset.AudioTrackAsset? I could be wrong because I can't check it now. Did something changed about it in 1.5 because the whole script was perfectly working in 1.0.
Thank you!
Yes, the Soundboard Template is set up to use AudioTrackAssets as inputs. The AudioComponents are created dynamically in the script, and the AudioTrackAssets are assigned to them at runtime.
Let me know if that clears things up!
Thank you for the help, I'll try again tomorrow and see why it's not working for me. Is there any way to install the 1.0 version?
Hi Julien,
There shouldn't be any functional changes in Lens Studio 1.5 that would affect what you're trying to do. We recommend that you continue to use 1.5, as it introduces a number important fixes. As I mentioned in my previous reply, the reason why you are unable to select any AudioComponents using your script is because (in the Soundboard Template, at least) there are no AudioComponents included in the scene. You can verify this by manually creating an AudioComponent in your scene, then assigning it as a property in your script.
Best,
Peter
Hey Peter,
I'm 100% sure I imported the audio in my project, what do you exactly mean with "there are no AudioComponents included in the scene"? My audio file is in the project when I try to select the audio in the script, nothing shows up, no audio, no other files.
Thanks
An imported audio file is referred to in script as an AudioTrackAsset.
The Lens Studio component used to play AudioTrackAssets is referred to in script as an AudioComponent. You create an AudioComponent by selecting Add Component > Audio in the Inspector
The script you shared defines an array of AudioComponents. If your scene doesn't have any AudioComponents, you won't see any in the selection window that pops up when you edit the property in the Inspector.
Is there a way to have the buttons show up while recording but then not have them in the video after you finish recording?
Working on one right now and when I uncheck the option to show in recording, they also disappear while recording, which seems like it might be confusing for users lol.
Hi Rhonda,
Unfortunately, there's currently no way to have a Lens' visual elements be shown during recording, but hidden in the recorded video. While I agree, it can be confusing for some users, we included the option to hide buttons as something of a compromise for users who don't want to see the buttons in the final video.
Thanks for asking!
Peter
great experience really I tried it several time and this is just amazing you can see some shots here with this lens.