Demo to preview the settings
Introduction
Manage sound effects and game sound right in your Bubble app with this Zeroqode plugin. Fast and easy to use! The plugin has all the methods you need to create games, enrich your user's web experience or just play music on your site.
How to setup
To manage sound effects using your sound
- Place a SoundFX Machine element on the page to get access to its events and actions.
- Place a clickable element on the page to start the sound.
- Create a workflow for a clickable element with Play a Sound action.
- Set up options for Play a Sound action. Here you can select your sound for effects.
You can use Pause Sound, Resume Sound and Stop Sound actions to manipulate sound.
- Use the Pause Sound action in a workflow to pause playing after starting.
- Use the Resume Sound action in a workflow to continue playing after the resume.
- Use Stop Sound action in a workflow to stop playing sound.
Also, you can change the sound volume while it is playing.
- Use the Change Volume action in a workflow to change the sound volume while it is playing.
Now you can add or remove effects from the sound.
- Use action for effects to add or to remove wished effects similar to in the example below. Available effects are High Pass Filter, Add Attack/Release, Add Delay, Flanger, Stereo Panner, Ring Modulator, Add Distortion, Quadrafuzz, Compressor, Low Pass Filter, Reverb, Convolver and Tremolo.
Plugin Element Proprieties
This plugin has the visual element SoundFX Machine which should be used on the page.
Element Actions
- Play a Freq. - This action should be used to start playing sound on a specific frequency.
Fields:
Title | Description | Type |
Freq. | Select the frequency to generate sound on this frequency | number |
ms to play for | Set how much time this sound will play (1000 = 1 second) | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Add Attack/Release - This action should be used to set attack and release effects on sound.
Fields:
Title | Description | Type |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from microphone | Dropdown |
Attack | Value in seconds that indicates the fade-in time when the sound is played. | number |
Release | Value in seconds that indicates the fade-out time once the sound is stopped. | number |
- Play a Sound - This action should be used to start sound from a specific path.
Fields:
Title | Description | Type |
Sound URL | URL for wished sound | file |
Volume | Value from 0 to 1 that represents a volume | number |
Release | Value in seconds that indicates the fade-out time once the sound is stopped | number |
Attack | Value in seconds that indicates the fade-in time when the sound is played | number |
Loop | If set “yes”, the file will start playing again after the end | yes/no |
- Add Delay - This action should be used to add a delay effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Ping Pong? | If set “yes”, will be set Ping Pong effect on sound | yes/no |
Feedback | Feedback option for delay | number |
Time | Time option for delay | number |
Mix | Mix option for delay | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Add Distortion - This action should be used to add a distortion effect to the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Gain | Gain option for distortion | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Quadrafuzz - This action should be used to add a quadrafuzz effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Low Gain | Low Gain option for quadrafuzz | number |
Mid Low Gain | Mid Low Gain option for quadrafuzz | number |
Mid High Gain | Mid High Gain option for quadrafuzz | number |
High Gain | High Gain option for quadrafuzz | number |
Mix | Mix option for quadrafuzz | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Flanger - This action should be used to add a flanger effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Time | Time option for flanger | number |
Speed | Speed option for flanger | number |
Depth | Depth option for flanger | number |
Feedback | Feedback option for flanger | number |
Mix | Mix option for flanger | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Reverb - This action should be used to add a reverb effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Time | Time option for reverb | number |
Decay | Decay option for reverb | number |
Reverse | Reverse option for reverb | yes/no |
Mix | Mix option for reverb | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Convolver - This action should be used to add a convolver effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Impulse | Impulse option for convolver | file |
Mix | Mix option for convolver | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Tremolo - This action should be used to add a tremolo effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Speed | Speed option for tremolo | number |
Depth | Depth option for tremolo | number |
Mix | Mix option for tremolo | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Stereo Panner - This action should be used to add a stereo panner effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Pan | Pan option for stereo panner | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Compressor - This action should be used to add a compressor effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Threshold | Threshold option for compressor | number |
Ratio | Ratio option for compressor | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Low Pass Filter - This action should be used to add a low pass filter effect on sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Freq. | Freq. option for low pass filter | number |
Peak | Peak option for low pass filter | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- High Pass Filter - This action should be used to add a high pass filter effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Freq. | Freq. option for high pass filter | number |
Peak | Peak option for high-pass filter | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Ring Modulator - This action should be used to add a ring modulator effect on the sound.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
Speed | Speed option for the ring modulator | number |
Distortion | Distortion option for the ring modulator | number |
Mix | Mix option for the ring modulator | number |
Source | wave - will be used sound generated on a specific frequency, input - will be used sound from a microphone | Dropdown |
- Stop Sound - This action should be used to stop sound.
- User Input (microphone, midi) - This action should be used to get audio from user's microphone.
Fields:
Title | Description | Type |
Mode | Add - will be used to add effect, Remove - will be used to remove the effect | Dropdown |
- Pause Sound - This action should be used to pause sound.
- Resume Sound - This action should be used to resume sound.
- Change Volume - This action should be used to change sound volume.
Fields:
Title | Description | Type |
Volume | Value from 0 to 1 that represents the volume | number |
Plugin Actions
- Play/Pause/Preload Sound FX - This action should be used to interact with sound.
Fields:
Title | Description | Type |
Reference ID | For chosen sound will be assigned a written reference id | string |
Sound Effect | Select pre-defined sound from the list or select “Custom” to add your sound URL | Dropdown |
Custom Sound URL | Add your custom sound URL. It will work only if the “Sound Effect” option value is “Custom” | string |
Mode | Interact with sound through the “Mode” option. Set “Play” to play the sound, “Pause” - to pause the sound, “Preload” - to preload the sound, “Restart” - to restart the sound and “Change Time” - to select a sound time. | Dropdown |
Change Time | Select sound time for playing. It will work only if the “Mode” option value is “Change Time” | number |
- Change Time Sound FX - this action should be used to change the sound preload time. Please note that for using it, you have to have one event on the Page Load (action Pay/Pause/Preload Sound FX: Reference ID value_1) with the same Reference ID as in this action. In case the Reference ID of the Change Time Sound FX action will differ from the Reference ID of the Play/Pause/Preload Sound FX action Reference ID, you will receive this error message:
Workflow example
Add the Flanger Effect to sound
In this workflow, it is represented how to add a flanger effect to sound using plugin action.
- In the workflow, it is created an event for a clickable element (button) with a Play a Sound element action.
- For the Play Sound action, all options are set as in the image below.
- On the page, is used a toggle element to add or remove the flanger effect.
- To add effect to sound, in workflow, is created an event when the toggle element is changed and it is checked with Flanger element action.
- For Flanger action set the following options with the main option Mode → Add.
- To remove the effect to sound, in workflow, is created an event when the toggle element is changed and it is not checked with the Flanger element action.
- For Flanger action set the following options with the main option Mode → Remove. In Remove mode, other option values do not matter. You can use default values for these.
Play a sound with Play/Pause/Preload Sound FX action
- In the workflow, it is created an event for a clickable element (button) with Play/Pause/Preload Sound FX action.
- For Play/Pause/Preload Sound FX action is set Play for Mode option. When a clickable element will click, will hear the Coin sound.
