..         ...........                                                                                       .......                
  ..              .:::                                                                                 ...................   .::::::::::::.    .
    .::++++++                                                                                           ........:::::::::::+++++++:      ..+++++
&&&&&&&+.                             .                                                                   .....::::::::::++++++++++++&&:        
&&&.                  .............                                                                ..........             +++++++++&&&&&&&&&+   
&&&&&&&&&++++++++++::::::::::....                                                                 ............:                                 
&&&&&&&&++++++++++:::::::::::.                                                                    ............:::                               
&&&&&&&++++++++++:::::::::::                                                                     .............:::::.                            
&&&&&&+++++++++++::::::::.                                                                       ..............:::::::                          
&&&&&+++++++++++:::::::.                                                                         ..............:::::::::                        
&&&&+++++++++++::::::                                                                            ..............:::::::::::                      
                   ::::::...............                                                                                     +++++++++&&&&&&&&&&
                .::::::::..............                                                                                        +++++++++&&&&&&&&
              :::::::::................                                                                                          ++++++++&&&&&&&
            :::::::::::...............                                                                                              +++++++&&&&&
         .:::::::::::.................                                                                                                ++++++&&&&
       ::::::::::::::................                                                                                                   :++++&&&

@arek_durlik

Web Audio Granular Synth

Technologies used:

                                                                                                                     
                              .-- ...                                                                                
                            .--.-++.  --- ...                                                                        
                           .- +########---------- ....                                                               
                          .- .+###############+++.   ---- ...                                                        
                         . -. -##-####################---------- ...                                                 
                        . .-     -++-+###  ###################-      --...                                           
                       . .-  .  + .  + --++#++#######################+------- ....                                   
                      - .-    + . . +  + .   -#+   #########   +#######            -- ....                           
                    .- -     . . +  . + . .       .#+  #+###+.    ####---------------------- ....        ...         
                   .- ++###-+##---#+   ..            -.  ############                            ---- ...# #+        
                  --.+########+##++-  #-+##++    .      ####  .-####----+--------------------------------#### ...    
                .-  ++############## #######.   #++ .+####+.   ###     #  ###                          ..####.   --. 
               .----..----#+.###############++####++####+#####++##----#--####----#---------------------..####..----..
              .         ####-     .-############################# .###+  +### +-#         +    .        ......      .
            ..-----+##+-####-.-------------#####################--+####---#--###.--------#-+###--###.--------------..
           .          -####+###++++             .++.###########    +##+  #  +###        # .#### ####   #          ...
          .------------......---++######+++----##--# ..++.###-----#-----#----#-------###---###+-###-.-#----------+..-
         .              ....           -+###++- ####  #--#             #    #       ####   #    -+ ####         -...+
       ..--.+++.-----------------------------.++.###..-###--------.+++.----+--------.#++--#-----#--####---------..-++
      .-   .# #-                             #--#+#.++.###-.      #+-+#    .+++.    +    #     #  .-###.      .+--+++
     .------####-.---------------------------####.-#--#+#-.-------#####.---#+-+#----.++++-----#---.#....------+--++++
    .     .-####-..                          ####  ####....    .+++.###.   #####    #+-+#     .+++.           +--++++
   .------..-++...--------------------------.-##+.-####--------#+-+#...-.++++###----#####-----#+-+#---------.--++++-.
  .        ......                            ....  -###.       #####    #+-+###+.   #####     #####        .---++++. 
 .--------------------------------------------------....-------#####.---####+...-.+++.##+----######--------+--+++-.  
..                                                             +##+..  +#####    #+-+#-.. .+++.###+.     .--++++-.   
......----------------------------------------------------------....--..####.----#####----#+-+#++..------+-++++-.    
............                                                            ....     #####-   #####+        --++++-.     
 .-++++--.........--------------------------------------------------------------..+++-.---#####----------++++-.      
    ..-++++++-.........-.                                                        .....    .####.      .--+++-.       
          ..-+++++++-.........-------------------------------------------------------------.....-----.--+++-.        
                ..--++++++--.......-.                                                                --+++-.         
                      ..--++++++-.-.......------------------------------------------------------------+++-.          
                             ..-+++++++---.....-..                                                 --+++-.           
                                   ..-+++++++---......--------------------------------------------.-+++-.            
                                         ..-+++++++-----....-..                                   -+++-.             
                                               ..-+++++++----.....--------------------------------+++-.              
                                                      ..-+++++++-----....-..                    -+++-.               
                                                            ..-+++++++-----...--..-------------.+++-.                
                                                                  ..-+++++++-----....---..    .+++-.                 
                                                                        ..-+++++++----------++-++-.                  
                                                                               .--++++++---+++++-.                   
                                                                                     ..-++++++-.

This project is a prototypical web-based granular synthesizer inspired by the TastyChips GR-1. It lets users experiment with granular synthesis in the browser, using sliders and visual feedback to control how sound is broken down and rebuilt.

A cloud of "grains" displayed over a waveform of the original audio file.
Display of the granular synth with audio grains over the waveform.

The grains' placement and sound are influenced by several parameters:

  • Density - Determines how many grains are generated, affecting the sound texture and the number of visual grains.
  • Size - Controls how long each grain lasts, impacting their duration both visually and audibly.
  • Pitch - Determines the frequency of the sound, making it higher or lower, and also affects the speed at which grains move on the display (faster for higher pitches, slower for lower).
  • Direction - Controls the percentage of grains that start reversed, causing them to move in the opposite direction on the display.
  • Spray and pan - Spray determines how spread out the grains are in time, while pan controls their spread across the left and right audio channels. Together, these parameters define the area where grains can appear, visualized as a rectangle on the display.
  • Attack and decay - Shape how grains fade in and out over time, visually blending them while smoothing the sound.
Showcase of how grain parameters affect audio and visuals.

This is something I'd like to build on in the future by switching to HTML Canvas or WebGL for rendering the grains, making it a lot more performant. I'm also interested in adding granular synthesis for video, combining visuals and audio to push the idea further.