Git Product home page Git Product logo

web-audio-graph's Introduction

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

web-audio-graph's People

Contributors

yerkopalma avatar

Stargazers

Mitchell Dokken  avatar Chris McCormick avatar Hans Piña avatar François Best avatar  avatar

Watchers

James Cloos avatar  avatar

web-audio-graph's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.