Simple Web Audio API based reverb effect.

Overview

soundbank-reverb

Simple Web Audio API based reverb effect.

Based on https://github.com/web-audio-components/simple-reverb by Nick Thompson.

Intended for use as a processor in soundbank, but it is compatible with any Web Audio API AudioNode set up.

Install via npm

$ npm install soundbank-reverb

API

var Reverb = require('soundbank-reverb')

var reverb = Reverb(audioContext)

Pass an instance of AudioContext to the constructor to create an AudioNode.

reverb.wet AudioParam

reverb.dry AudioParam

reverb.cutoff AudioParam

Defaults to 20000.

reverb.filterType (get/set)

Defaults to "lowpass".

Can be any of the filters types specified by BiquadFilterNode

reverb.time (get/set)

Impulse time in seconds. Defaults to 3.

reverb.decay (get/set)

reverb.reverse (get/set)

true or false. Defaults to false.

Example

var Reverb = require('soundbank-reverb')

var audioContext = new AudioContext()

var reverb = Reverb(audioContext)
reverb.connect(audioContext.destination)

reverb.time = 1 //seconds
reverb.wet.value = 0.8
reverb.dry.value = 1

reverb.filterType = 'lowpass'
reverb.cutoff.value = 4000 //Hz

setInterval(function(){
  var source = audioContext.createOscillator()
  source.type = 'sawtooth'
  source.connect(reverb)
  source.start()
  source.stop(audioContext.currentTime + 0.5)
}, 2000)
You might also like...

❄️ Add a live frosted glass blur effect over any type of web content, including text.

❄️ 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

Nov 10, 2022

Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Dec 30, 2022

A decorative website background effect where SVG shapes morph and transform on scroll.

A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Dec 26, 2022

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Nov 29, 2022

Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage div class="box" pLorem ip

Dec 30, 2022

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Dec 6, 2022

A motion hover effect for a background grid of images.

A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Dec 31, 2022

fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

Oct 28, 2022

A mouse particle effect react component

A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

Dec 17, 2022
Comments
  • Sometimes Turns off

    Sometimes Turns off

    I've noticed sometimes it goes into a 'mute' state where, it seems like, it's no longer firing the next() event. Any ideas? Similarly, is there a way we could manually call .tick() on the reverb node or something, for games that have a requestAnimationFrame loop and don't want to get into managing timeouts?

    Sorry I don't have a repo for testing yet... I'm trying to wrap my head around how this reverb effect actually works.

    opened by mattdesl 1
  • Problems with MS Edge

    Problems with MS Edge

    It looks like this is causing distorted/choppy output in MS Edge, which has a sampleRate of 192000. The other browsers I've been testing seem to use 44100, which is fine.

    Any ideas?

    I can put together a test case if need be.

    opened by mattdesl 1
Owner
Matt McKegg
music hacker // button pusher destroywithscience.com
Matt McKegg
100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)

beez 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API) The concept An Hive i

Gaëtan Renaudeau 34 Dec 16, 2022
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Live input Web Audio effects

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 e

Chris Wilson 488 Dec 22, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Codrops 112 Jul 27, 2022
Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw

Elastic Progress Creates a button that turns into a progress bar with a elastic effect. Based on a Dribbble shot by xjw. By Lucas Bebber. Article on C

Codrops 876 Jan 1, 2023
Simple jQuery plugin for 3d Hover effect

jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015

Rian Ariona 333 Jan 4, 2023
A simple yet powerful native javascript plugin for a cool typewriter effect.

TypewriterJS v2 NPM Repository JSFiddle Example Emoji Example CDN You can use the CDN version of this plugin for fast and easy setup. <script src="htt

Tameem Safi 1.8k Jan 4, 2023
Playground for the fire effect from DOOM. Really simple algorithm and all experiments are welcome!

Doom Fire Algorithm Playground A playground of experiments related to the Doom fire effect implemented in JavaScript. Feel free to submit your experim

Filipe Deschamps 1.3k Jan 2, 2023