npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webaudio-chnl

v0.0.8

Published

Chnl - one channel, all effects.

Downloads

5

Readme

Chnl - one channel, all effects.

Why would I ever want a Chnl?

I needed something with a LOT of audio effects integrated which can be manipulated in many different aspects. And I needed to use this in many different ways: Every native AudioNode should be able to connect to it as it would be a normal AudioNode, but also other Chnls should be able to connect to another Chnl. So I could simply and intuitively create audio graphs with a set of effects. No matter if I connect a song, mic input or even a synthesizer.

Therefore I created Chnl.

Installation

Via npm

npm i webaudio-chnl -S

Usage

It's really simple. And intuitive.

Creating a Chnl

You can create a new Chnl instance by constructing the Chnl-class with your AudioContext object as the 1° parameter.

new Channel(audioCtx)

Effects

You have access to a lot of effects. Under the hood, Chnl uses the webaudio-effect-units-collection module. So you have access to a lot of effects which can be enabled and disabled.

You can access the effects with the effects property of your Chnl instance.

Example

const channel = new Chnl(audioCtx);
const {
  gain,
  chorus,
  delay,
  phaser,
  overdrive,
  compressor,
  lowpass,
  highpass,
  tremolo,
  wahwah,
  bitcrusher,
  moog,
  pingPongDelay
} = channel.effects;

gain.setValue('gain', 0.55);

delay.addEffect('delay');
delay.setValue('feedback', 0.2);

Connecting

Connect to a Chnl

You can connect any normal AudioNode to a Chnl:

const channel = new Chnl(audioCtx);
const gain = audioCtx.createGain();
gain.connect(channel);

But you can also connect a Chnl to a normal AudioNode:

const channel = new Chnl(audioCtx);
const gain = audioCtx.createGain();
channel.connect(gain);

You can even connect one Chnl to another one:

const channel1 = new Chnl(audioCtx);
const channel2 = new Chnl(audioCtx);
channel1.connect(channel2);

Have fun connecting!

Activating an effect (since v0.0.6)

Per default, no effect is connected in the interior audio graph. In previous versions, this was the case. I decided to revise the way how effects are used. Because if all effects are initially actively connected, there's way more needless audio processing (also if the effects are initially turned off). Therefore I decided to connect the effects only if they are explicitly needed.

TLDR: Before using an effect, you need to activate it. When activating an effect, the whole audiograph will be rebuilt.

Note: The 'gain'-effect is already activated by default.

Example:

const chnl = new Chnl(audioCtx);
chnl.addEffect('delay');
chnl.addEffect('chorus');
chnl.effects.delay.setValue('delayTime', 500);

Disabling an effect (since v0.0.6)

Since you can activate an effect, it's no surprise that you can also disable the same effect. When you disable an effect, it will be removed from the audiograph to prevent needless processing. Example:

const chnl = new Chnl(audioCtx);
chnl.addEffect('delay');
chnl.effects.delay.setValue('delayTime', 500);
chnl.removeEffect('chorus');

Final example

This a bit more advanced example, which connects an oscillator to a Chnl and applies some effects.

const audioCtx = new AudioContext();
const chnl = new Chnl(audioCtx);

const osci = audioCtx.createOscillator();
osci.frequency.value = 300;

osci.connect(chnl);
chnl.connect(audioCtx.destination);

// Activate effects
chnl.addEffect('highpass');
chnl.addEffect('bitcrusher');

chnl.effects.gain.setValue('gain', 0.2);
chnl.effects.highpass.setValue('frequency', 500);
chnl.effects.bitcrusher.setValue('bits', 4);

osci.start();