https://github.com/megaemce/mobbler

Analog music creation and realtime visual performance
https://github.com/megaemce/mobbler

analog-music audio audio-effect javascript music web-audio web-audio-api

Last synced: about 1 year ago
JSON representation

Analog music creation and realtime visual performance

• Host: GitHub
• URL: https://github.com/megaemce/mobbler
• Owner: Megaemce
• License: gpl-3.0
• Created: 2020-10-18T15:38:36.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-01-15T04:28:33.000Z (over 2 years ago)
• Last Synced: 2025-04-06T16:48:46.758Z (about 1 year ago)
• Topics: analog-music, audio, audio-effect, javascript, music, web-audio, web-audio-api
• Language: JavaScript
• Homepage: https://mobbler.js.org
• Size: 20.2 MB
• Stars: 11
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          




![Logo Light](/img/mobbler_animated.svg#gh-light-mode-only)

![Logo Dark](/img/mobbler_animated_dark.svg#gh-dark-mode-only)

 



## Introduction

Are you tired of your old and dirty analog music hardware? 


Tired of connecting modular synthesizers with actual PHYSICAL cables? 


Have you always dreamed of creating those mesmerizing berlin-techno hits of the 70's?




 

 






**Say no more!** Turn those clumsy analog nightmares into modern world browser-based dreamsᵀᴹ.


Introducing  - a revolutionary browser tool for analog-like music creation and realtime [visual performance](https://en.wikipedia.org/wiki/VJing).












 

 🎙️ [TRY IT!](https://mobbler.js.org)




## Motive

 is a complex extension of [web audio playground](https://github.com/cwilso/WebAudio). It allows user to explore most of [web audio API](https://www.w3.org/TR/webaudio/) options and play with them in easy to handle visual format. Moreover user can manipulate any module's parameters with other modules thus opening option for custom effects creation without any programming knowledge. It can be used for music creation, education or just for fun. 

Further reading:

  

    Inputs

    Basics

    Effects

    Outputs

    Tutorials

  

  

    

     


      
Audio source

      
Offset

      
Oscillator

      
Pulse oscillator

      
Live input

     

   

    

     


      
Biquad filter

      
Convoler

      
Crossfade

      
Delay

      
Dynamic compresssor

      
Envelope

      
Equalizer

      
Gain

      
Stereo panner

     

   

    

     


      
Chorus

      
Distortion

      
Delay

      
Flanger

      
Reverb

      
Gain Tremolo

      
Panner Tremolo

      
Vibrato

      
WahWah

     
   

   

    

     


      
Analyser

      
Output

      
Visualisation

     
   

   

    

     


      
Create Gain Tremolo

      
Create Reverb

      
Create Delay

      
Create Flanger

      
Create Chorus

     
   

   

  


## How to start

Simply create Audio source module (from `Inputs` menu) and Output (from `Outputs` menu) and connect them with a Audio source cable. Hit the play button 



 

 


For more specific modules details and tutorials please check **[mobbler's WIKI](https://github.com/Megaemce/mobbler/wiki)**

## Technology & limitation

Made in vanilla JavaScript as my first big project to get thorough knowledge of this language.


Due to lack of mouse-related handlers solution doesn't work properly with touch (mobiles/tablets). 


It was developed for Chrome browser however seems to be working fine on Firefox and Egde too.

I would never create this solution without the help of these people:

- [Matt McKegg](https://github.com/mmckegg) - author of amazing [web-audio-school](http://mmckegg.github.io/web-audio-school/)

- [Chris Wilson](https://github.com/cwilso) - webAPI guru. Creator of the original idea

- [Chris Lowis](https://github.com/chrislo) - amazing tutorials (just [one example](https://blog.chrislowis.co.uk/2013/06/17/synthesis-web-audio-api-envelopes.html))

- [Sam Bellen](https://github.com/Sambego) - role model for proper multiAudioNode handling and one of the first who started the fire

- [Oskar Eriksson](https://github.com/Theodeus) - creator of Tuna.js

- [Tero Parviainen](https://github.com/teropa) - creator of amazing webAudioAPI [tutorials](https://teropa.info/blog/2016/08/19/what-is-the-web-audio-api.html)

 

**Thank you 👋**

[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)