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

web-audio-graph

v2.0.4

Published

web audiograph builder

Downloads

17

Readme

web-audio-graph

Build Status js-standard-style

web audiograph builder

Usage

var AudioGraph = require('web-audio-graph')
var graph = new AudioGraph()

var source = graph.addSource('oscillator')
var filter = source.addNode('filter')
var gain = filter.addNode('gain')

source.play()

API

var graph = AudioGraph([context])

This module expose the main AudioGraph class, use it to create a new instance of an audio graph. There's no need for the new keyword. The only argument to pass is optional, use it if you want to give the graph object a known AudioContext, if you omit this parameter a new AudioContext will be created. An AudioGraph has two main properties:

  • context: Reference to the AudioContext object for this graph.
  • sources: A Set object that store each SourceWrapper fro this graph.

var source = graph.addSource(type, value)

Creates a new source node of the type specified, where type is a string of buffer, constant, oscillator, mediaElement and mediaStream. For some of those types, you need to pass a value to create the source.

  • buffer: Creates a AudioBufferSourceNode, this type of source need an AudioBuffer as value. A common pattern for this source is to load through ajax (fetch) a file.
fetch('music.mp3')
.then(response => response.arrayBuffer())
.then(buffer => {
  graph.context.decodeAudioData(buffer, audioBuffer => {
    var source = graph.addSource('buffer', audioBuffer)
    // ...
  })
})
if (navigator.mediaDevices) {
  navigator.mediaDevices.getUserMedia ({audio: true, video: true})
  .then(function (stream) {
    var source = graph.addSource('mediaStream', stream)
    // ...
  })
}

If given params are correct, a source node instance is returned. Source nodes have the following properties.

  • context: Reference to the AudioContext object for this source (always the same as the grpah from which this source was created).
  • outputs: A Set object that store each output node for this source.
  • type: The type passed to the constructor.
  • isPlaying: A boolean set to true if the source is playing and false otherwise.

graph.play()

Start playing all the sources for this graph.

graph.stop()

Stop all the sources for this graph.

graph.pause()

Pause all the sources for this graph.

var newNode = node.addNode(type)

Add a node of the given type. This method can be called for a normal node or a source node (source node inherits from normal nodes). You can't add source nodes with this method, because source node has no inputs (they are the input), and source node can only be added to the graph itself. The availaible types are analyser (to add AnalyserNode), filter (to add BiquadFilterNode), channelMerger (to add ChannelMergerNode), channelSplitter (to add ChannelSplitterNode), convolver (to add ConvolverNode), delay (to add DelayNode), compressor (to add DynamicsCompressorNode), gain (to add GainNode), iirfilter (to add IIRFilterNode), panner (to add PannerNode), stereoPanner (to add StereoPannerNode) and waveShaper (to add WaveShaperNode).

var newWorletNode = node.addWorkletNode(script, processor)

Add a AudioWorkletNode. Similar to the normal addNode method, but returns a Promise that resolves to the newly added AudioWorkletNode. You need to pass the processor script file name as the first argument and the processor name as the second argument.

node.addWorkletNode('gain-processor.js', 'gain-processor')
  .then(gainWorklet => {
    gainWorklet.connectToDestination()
    // or keep adding (worklet)nodes
    source.play()
  })

node.connectToDestination()

Connect a node to the context.destination fo the graph.

node.update(config)

Update properties of the node. The properties of the config object depend on the type of node. Currently supported properties are:

  • For analyser nodes: fftSize, minDecibels, maxDecibels and smoothingTimeConstant.
  • For filter nodes: frequency, detune, Q, gain and type.
  • For convolver nodes: buffer and normalize.
  • For delay nodes: delayTime.
  • For compressor nodes: threshold, knee, ratio, reduction, attack and release.
  • For gain nodes: gain.
  • For panner nodes: coneInnerAngle, coneOuterAngle, coneOuterGain, distanceModel, maxDistance, orientationX, orientationY, orientationZ, panningModel, positionX, positionY, positionZ, refDistance,and rolloffFactor.
  • For stereoPanner nodes: pan.
  • For waveShaper nodes: curve and oversample.

Each of these properties are set directly to their respectives nodes, so check those for further documentation.

source.play([time])

Play the source at the given time. If time is not set, it defaults to 0.

source.stop()

Stop the source.

source.pause()

Stop the source and save the currentTime so the next time you call play it will pass the time when you last paused.

source.update()

Update properties of the source. The properties of the config object depend on the type of source. Currently supported properties are:

  • For buffer nodes: buffer, loop, detune and playbackRate.
  • For constant nodes: offset.
  • For oscillator nodes: type, detune and frequency.

Each of these properties are set directly to their respectives sources, so check those for further documentation.

License

MIT