SoundFX - Effects for Sounds & Music Plugin

Introduction

Manage soung 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

  1. Place a SoundFX Machine element on the page to get access to its events and actions.
Image without caption
  1. Place a clickable element on the page to start the sound.
  1. Create a workflow for a clickable element with Play a Sound action.
Image without caption
  1. Set up options for Play a Sound action. Here you can select your sound for effects.
Image without caption
You can use Pause Sound, Resume Sound and Stop Sound actions to manipulate sound.
  1. Use the Pause Sound action in a workflow to pause playing after starting.
Image without caption
  1. Use the Resume Sound action in a workflow to continue playing after the resume.
Image without caption
  1. Use Stop Sound action in a workflow to stop playing sound.
Image without caption
Also, you can change the sound volume while it is playing.
  1. Use the Change Volume action in a workflow to change the sound volume while it is playing.
Image without caption
Now you can add or remove effects from the sound.
  1. 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.
Image without caption
Image without caption

Plugin Element Proprieties

This plugin has the visual element SoundFX Machine which should be used on the page.
Image without caption

Element Actions

  1. Play a Freq. - This action should be used to start playing sound on a specific frequency.
    1. 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
  1. Add Attack/Release - This action should be used to set attack and release effects on sound.
    1. 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
  1. Play a Sound - This action should be used to start sound from a specific path.
    1. 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
  1. Add Delay - This action should be used to add a delay effect on the sound.
    1. 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
  1. Add Distortion - This action should be used to add a distortion effect to the sound.
    1. 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
  1. Quadrafuzz - This action should be used to add a quadrafuzz effect on the sound.
    1. 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
  1. Flanger - This action should be used to add a flanger effect on the sound.
    1. 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
  1. Reverb - This action should be used to add a reverb effect on the sound.
    1. 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
  1. Convolver - This action should be used to add a convolver effect on the sound.
    1. 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
  1. Tremolo - This action should be used to add a tremolo effect on the sound.
    1. 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
  1. Stereo Panner - This action should be used to add a stereo panner effect on the sound.
    1. 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
  1. Compressor - This action should be used to add a compressor effect on the sound.
    1. 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
  1. Low Pass Filter - This action should be used to add a low pass filter effect on sound.
    1. 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
  1. High Pass Filter - This action should be used to add a high pass filter effect on the sound.
    1. 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
  1. Ring Modulator - This action should be used to add a ring modulator effect on the sound.
    1. 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
  1. Stop Sound - This action should be used to stop sound.
  1. User Input (microphone, midi) - This action should be used to get audio from user's microphone.
    1. Fields:
      Title
      Description
      Type
      Mode
      Add - will be used to add effect, Remove - will be used to remove the effect
      Dropdown
  1. Pause Sound - This action should be used to pause sound.
  1. Resume Sound - This action should be used to resume sound.
  1. Change Volume - This action should be used to change sound volume.
    1. Fields:
      Title
      Description
      Type
      Volume
      Value from 0 to 1 that represents the volume
      number

Plugin Actions

  1. Play/Pause/Preload Sound FX - This action should be used to interact with sound.
    1. 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
  1. 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:
Image without caption

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.
  1. In the workflow, it is created an event for a clickable element (button) with a Play a Sound element action.
Image without caption
  1. For the Play Sound action, all options are set as in the image below.
Image without caption
  1. On the page, is used a toggle element to add or remove the flanger effect.
Image without caption
  1. 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.
Image without caption
  1. For Flanger action set the following options with the main option ModeAdd.
Image without caption
  1. 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.
Image without caption
  1. For Flanger action set the following options with the main option ModeRemove. In Remove mode, other option values do not matter. You can use default values for these.
Image without caption

Play a sound with Play/Pause/Preload Sound FX action

  1. In the workflow, it is created an event for a clickable element (button) with Play/Pause/Preload Sound FX action.
Image without caption
  1. For Play/Pause/Preload Sound FX action is set Play for Mode option. When a clickable element will click, will hear the Coin sound.
Image without caption

Changelogs

Demo to preview the settings