Live input Web Audio effects

Overview

Live Audio Input effects

I whipped this app up to test live audio input, letting the user select a few common tunable effects and see (and hear) the effects. It's also a good demo of how to build chorus and flanging effects in WebAudio.

Check it out here, feel free to fork, submit pull requests, etc.

-Chris

Comments
  • LFO Tweaks and Mod Delay

    LFO Tweaks and Mod Delay

    Greetings Chris,

    Really have enjoyed playing with the Web Audio API and attempted to implement a few minor additions to your demo.

    Extended the Gain LFO interface slightly by allowing the user to:

    • Choose the type of oscillator affecting the amplitude
    • Control the range or "depth" of the effect.

    I am a fan of the sharp "cutting" effect of the square wave and thought it would be fun to toggle among all of the different types of LFO signals the API provides.

    Created a simple mod delay, which adds "color" (chorus) to the delayed signal. This is loosely modeled after one of my favorite guitar pedals the Electro-Harmonix Memory Man, as made famous by U2's guitarist "The Edge". Took the basic chorus and introduced it into a delay signal chain. Not sure if my quick prototype measures to the original pedal, nonetheless gets the concept across. Motivated to explore more finely tuned future iterations.

    Looking forward to keeping involved in the community, -Kyle Verrier

    opened by kverrier 3
  • Fixes oscillator types.

    Fixes oscillator types.

    Currently, the error "The provided value 'undefined' is not a valid enum value of interface OscillatorType" is happening due to the use of enums like osc.SINE.

    The oscillator node type should be a string (https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode/type)

    opened by alemangui 1
  • Testing locally

    Testing locally

    What am I missing? This file is under the said directory but I'm not sure what the console errors are saying:

    XMLHttpRequest cannot load file:/Audio-Input-Effects-master/sounds/cardiod-rear-levelled.wav. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

    effects.js:191 Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load '/Audio-Input-Effects-master/sounds/cardiod-rear-levelled.wav'.

    Thanks (for sharing!)

    opened by JewelMaiden 1
  • Removed old apm constraints + add new master echoCancellation constraint to turn off Chrome audio processing

    Removed old apm constraints + add new master echoCancellation constraint to turn off Chrome audio processing

    echoCancellation = false is the master constraint which turns off all audio processing which is necessary for this demo to work on Windows if audio ducking is enabled (which it is by default). Turning off Chrome audio processing also turns off audio ducking (part of it).

    Details here.

    opened by KaptenJansson 1
  • Distortion automation

    Distortion automation

    Thank you Chris for this wonderful library of effects. I am working on a project which kind of simulates an online DAW. I was wondering how I would be able to automate effects which cannot be built using nodes which are "AudioParam" (Since only audio params possess the ability to schedule values on a timeline). For example - distortion or pitch shifting.

    Thanks, Anand

    opened by anmahade 1
  • (Partly) fix broken demo website

    (Partly) fix broken demo website

    Partly closes #16

    It still needs a way to create the audio context only when the user has interacted, otherwise the user has to rapidly click the page before it loads

    opened by MysteryPancake 0
  • Adds link to demo page.

    Adds link to demo page.

    This is a tiny PR, but I thought it would be useful for people visiting the repository to have a link to the appspot page. Since the demo is not a gh-pages, it's not evident where it is hosted.

    Cheers,

    opened by alemangui 0
  • Fixes oscillator types for Gain LFO and LFO Filter

    Fixes oscillator types for Gain LFO and LFO Filter

    Hello,

    This PR fixes the warning The provided value <int> is not a valid enum value of type OscillatorType. when changing the wave type on Gain LFO and LFO Filter. It used to get a numeric value from a select instead of the valid oscillator type strings.

    Cheers!

    opened by alemangui 0
  • Removes unused parameter in createLPInputFilter function.

    Removes unused parameter in createLPInputFilter function.

    Hello,

    I believe the parameter in function createLPInputFilter is never used. The function seems to initialize the global variable without using the received parameter.

    Cheers!

    opened by alemangui 0
  • Removes an unnecessary check for webkit in the window.location string

    Removes an unnecessary check for webkit in the window.location string

    There seems to be an if/else checking for webkit that does the same thing in both cases. If it isn't necessary, perhaps it would be better to remove it?

    opened by alemangui 0
  • pitch problem

    pitch problem

    i see you the step on the slider by 0.05. that means you are change the pitch by 1.025 each! 0.05 /2 is 0.025 + 1 = 1.025. if you want to change the pitch 5% then the step should be change by 0.1 each. 1.05 -1 is 0.05 x2 = step = "0.1" Screenshot 2021-09-06 6 49 47 PM

    opened by s213413 0
  • I'v' made an updated version with new functionalities

    I'v' made an updated version with new functionalities

    Hi peeps,

    Based on this project I've made my own repository with added functionalities (and modernisations to be compliant with modern browers, mainly Chrome).

    Added options; Record the audio from your live performance. Choose a sound file instead of the microphone to add effects to.

    The project: https://github.com/jonathanneels/Audio-Input-Effects Test it here: https://liveaudioeffects.herokuapp.com/

    Enjoy!

    opened by jonathanneels 1
  • CORS error due to shaders request (http vs https)

    CORS error due to shaders request (http vs https)

    Hello,

    I noticed that the shaders are not loading because of a CORS error when accessing the app via http. The requests for the shaders are done with https. It is easily circumvented by just accessing the demo site with https, but since Google links to the http site, it may be desirable to support it as well.

    XMLHttpRequest cannot load https://webaudiodemos.appspot.com/input/shaders/sonogram-fragment.shader. 
    No 'Access-Control-Allow-Origin' header is present on the requested resource. 
    Origin 'http://webaudiodemos.appspot.com' is therefore not allowed access.
    

    Cheers!

    opened by alemangui 0
  • demo error

    demo error

    http://webaudiodemos.appspot.com/input/

    NavigatorUserMediaError constraintName: "" message: "" name: "PERMISSION_DENIED" proto: NavigatorUserMediaError

    opened by dataino-it 2
  • Uncaught TypeError

    Uncaught TypeError

    Cannot read property 'MAX_VERTEX_TEXTURE_IMAGE_UNITS' of null

    At https://github.com/cwilso/Audio-Input-Effects/blob/master/js/visualizer/visualizer.js#L112

    opened by potomak 0
Owner
Chris Wilson
Chris Wilson
Simple styles and effects for enhancing text input interactions.

Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you

Codrops 966 Jan 4, 2023
Simple Web Audio API based reverb effect.

soundbank-reverb Simple Web Audio API based reverb effect. Based on https://github.com/web-audio-components/simple-reverb by Nick Thompson. Intended f

Matt McKegg 21 May 30, 2022
A set of effects for mouse-following image trails that show a random series of images.

Image Trail Effects A set of effects for mouse-following image trails that show a random series of images. Inspired by the effect seen on VLNC Studio.

Codrops 177 Dec 28, 2022
Only 90's kids remember... well not really, but these beloved effects that would follow your mouse around will always be classic reminders of the old, beloved internet.

90's Cursor Effects "Knowing the codes" used to be all the rage, I want to bring a few back. A repo of the old effects that inspired creativity and th

Tim Holman 2.6k Jan 9, 2023
A set of playful dragging effects for images using various techniques.

Image Dragging Effects A set of playful effects for dragging images. Article on Codrops Demo Installation Install dependencies: npm install Compile t

Codrops 71 Dec 4, 2022
image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Gaëtan Renaudeau 797 Nov 26, 2022
Demonstration of different animation effects with AngularJS ngView directive.

ngView-animation-effects This is a simple demonstration of how easy you can make your ngView directive transition pages with nice animations. All you

Aliaksandr Astashenkau 184 Dec 31, 2022
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Rain & Water Effect Experiments Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber. Article on Codrops

Codrops 1.4k Jan 4, 2023
A bursting particles effects buttons component ✨💥❄️🌋

vue-particle-effect-buttons (demo) Bursting particle effect buttons for Vue. This library is a Vue portal of an awesome Codrops Article by Luis Manuel

Vincent Guo 252 Nov 11, 2022
A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Codrops 1.2k Jan 1, 2023
Loading effects for assets including some built in animated reveals

Asset loading effects This is a library to show the loading progress of given assets and reveal them using various animations. Please give feedback, r

Zach Saucier 97 Dec 8, 2022
Some ideas for decorative link distortion effects using SVG filters.

Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De

Codrops 122 Dec 4, 2022
Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Codrops 197 Oct 16, 2022
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Akihiro Oyamada 68 Nov 28, 2022
Easy Effect is a WYSIWYG Lottie animation editor, dedicated to helping you make dynamic effects easily.

Easy Effect ?? Introduction Easy Effect is a WYSIWYG animation editor based on Lottie. ✨ Feature ?? ease to use Anyone who want to create an animation

拍岸 10 Dec 16, 2022
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

花祁 466 Dec 27, 2022
A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Akihiro Oyamada 69 Jan 1, 2023
❄️ Add a live frosted glass blur effect over any type of web content, including text.

Frosted Glass ❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️ Demos Install npm install frosted-glass --save

Adrian Carriger 63 Nov 10, 2022