Audio & Sounds
Add to favorites
Elevate your scene with beautiful sounds
Play video
Play sound event
Spline allows you to add sounds by selecting an object and adding an event. Make sure the Play sound option is selected.
Properties
Here’s a list of the Play Sound properties:
- Interaction: Play sounds or Pause/Stop sounds that are connected to other objects
- When: Set the event to trigger the sound: Mouse or Key. Use play to trigger the sound on load
- Sound File: .mp3 or .wav formats, max 2MB
- Toggle: Set a toggle to stop or pause the sound on your object
- Volume: Controls the volume of the sound
- Delay: Controls the delay of the sound
- Loop: Set the sound to play one, infinitely or an amount of time
Sounds Library
Right after selecting the Play sound event, in the properties, click on the icon next to Sound file. This is the sound library in Spline, you can choose from a variety of sounds. To have access to the full library, you need a premium account.
Upload sound
Let’s upload our own custom sound. First, we have to get a sound, go to one of these websites and download a sound. Make sure the size of the file is less than 2MB and it is a MP3 or WAV format. I will leave the MP3 file in the assets folder below.
Drawer’s sound
Select the first drawer and add the play sound event. Set the interaction to Play, trigger When with Mouse Down, upload the drawer sound, leave toggle at none and the rest of the properties the same.
Add sound to Library
Open the library of sounds and you’ll see an option to add the drawer sound to the library. By doing that, we can re-use the same sound elsewhere.
Other drawers
Similar to the first one, we are going to add the same sound to the other drawers. Select the drawer and add the play sound event. Set the interaction to Play, trigger When with Mouse Down, upload the drawer sound, leave toggle at none and the rest of the properties the same. Repeat the same steps to the rest of the drawers.
Sliding door sound
For the doors, add a play sound event to the Sliding Door object. In the library of sound, select the Door Opening one.
TV sound
The next object is the TV, add a Play sound event. Select the Click 01 sound from the library, if you don’t have a premium account, you can search online for one and upload it.
iMac
Similar to the TV, add a Play sound event. Select the Click 01 sound from the library, if you don’t have a premium account, you can search online for one and upload it.
Light switch
Similar to the TV, add a Play sound event. Select the Click 01 sound from the library, if you don’t have a premium account, you can search online for one and upload it.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Subtitles
Videos
Assets
1
Intro to Game Controls
Use key inputs, joysticks, buttons, gravity, and collision detection to move your character through your scene
4:26
2
States, Events & Animations
Animate objects by using state-based animations
13:03
3
Movement & Controls
Use game controls to move an object in your scene
5:26
4
Collision Detection
Set a shape to your character to enable collisions
10:15
5
Physics
Make your object dynamic in a 3D environment
4:34
6
3D Camera & Lighting
Customize your camera to make your scene looks stunning
16:10
7
Audio & Sounds
Elevate your scene with beautiful sounds
6:32
8
URL & Embed
Export your 3D scene in web with no code
4:16
9
Export in React Site
Export your design in a React environment
29:31
10
Performance & 3D Vitals
Monitor and optimize your scene using 3D Vitals
4:28
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Willie Yam
Front-end/UI developer at Design+Code
I do UI coding. HTML/CSS/JS/SWIFTUI dev.
10 courses - 37 hours
![course logo](http://images.ctfassets.net/ooa29xqb8tix/6LKKWLFkx6JrlMY2mWPocd/2513a06a163424ba900bcff844c2c3fb/play-logo.png?w=400&q=50?fm=jpg&q=50)
Design and Prototype an App with Play
Build a completely functional prototype without writing a single line of code from your phone
3 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50?fm=jpg&q=50)
Create a 3D site with game controls in Spline
Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline
2 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build a Movie Booking App in SwiftUI
Learn how to create an iOS app based on a beautiful UI design from Figma with interesting animations and interactions, create a custom tab bar and use navigation views to build a whole flow
1 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/628IYmTv4uib8slYz9iuok/3de9010de04ae92a23c94f9885746db2/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build Quick Apps with SwiftUI
Apply your Swift and SwiftUI knowledge by building real, quick and various applications from scratch
11 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/0cjyplK9nhXoHTHN3XfTr/0e1edc5106a4c99ca2de7eeaaa772603/ui-logo.png?w=400&q=50?fm=jpg&q=50)
CSS Handbook
A comprehensive series of tutorials that encompass styled-components, CSS, and all layout and UI developments
1 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50?fm=jpg&q=50)
Advanced React Hooks
Learn how to build a website with Typescript, Hooks, Contentful and Gatsby Cloud
5 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4k80OoiAH74E4JWnzT7iHv/d8b989084c313064df5be11f940ea48b/unity-logo.png?w=400&q=50?fm=jpg&q=50)
Unity for Designers
If you want to make a game and don't know where to start, you are in the right place. I will teach you how to use Unity, code in C# and share essential tips and tricks to make your first game.
5 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/1YISP6mvD83Gao3lQdhWqi/8b36d37d05f77a894dd0b7d30f8e6753/js-logo.png?w=400&q=50?fm=jpg&q=50)
Create a Javascript Game
Learn how to create a web game using Phaser 3, a popular javascript game engine. Draw a map using an editor, implement the player, make the player move, apply physics, collisions, and implement the enemies.
2 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Build an ARKit 2 App
Introduction to ARKit and learn how to make your own playground. You will be able to add models or even your own designs into the app and play with them
4 hrs
![course logo](http://images.ctfassets.net/ooa29xqb8tix/4bWEQMRsA6PzjiHljsxryp/55d78d84da072e9c22caddbccd67396b/swift-logo.png?w=400&q=50?fm=jpg&q=50)
Create a SpriteKit Game
Overview of SpriteKit a powerful 2D sprite-based framework for games development from Apple and learn how to create your very own platform
3 hrs