Web Audio API

from Wikipedia, the free encyclopedia

The Web Audio API is an API written in JavaScript for generating and processing audio signals in web applications. The standard is being developed by a W3C working group and is used, for example, in browser games. It can be seen as an audio analogue of the canvas element .

functionality

Audio signals are routed through a graph (AudioContext) specified by program code , in which each node (AudioNode) represents a processing step and is connected to other nodes. There is an output node which, depending on the type of context, forwards the data to the audio output of the system, e.g. the loudspeaker , or saves it as binary data. Input nodes can produce an audio signal through an oscillator or obtain it from other sources. These can be audio files, a connected microphone or WebRTC connections. Finally, there are nodes that process audio signals. The spectrum ranges from simple manipulation of the volume to the application of various filters to the possibility of recalculating the surround sound (including the Doppler effect ) for any position and movement of the listener. Several audio channels are automatically adjusted if the source and target use different arrangements, but they can also be edited using their own nodes. There are also nodes that leave the audio signal unchanged but perform a fast Fourier transform for analysis . When linking the nodes, loops are allowed if one of the nodes contained delays the output. The nodes have parameters that describe the exact behavior and can also be changed during processing.

The actual signal processing takes place mainly in the underlying implementation of the API, but direct processing in JavaScript is also possible.

example

It shows three rectangles labeled "Oscillator", "Gain" and "AudioDestination" and connected in this order by arrows. The first rectangle is selected, its properties are displayed in the right half: "type: sine, frequency: 2500, detune: 0".
Graphical representation of the AudioNodes of the example in the debug view in Firefox

The following example creates a sine tone . 

//AudioContext erzeugen
var audioCtx = new AudioContext();

//AudioNodes erzeugen
var oscillatorNode = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();

//AudioNodes verbinden
oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination);

//AudioNodes konfigurieren
oscillatorNode.type = 'sine';
oscillatorNode.frequency.value = 2500;
gainNode.gain.value = 0.5;

//Ausgabe starten
oscillatorNode.start();

By dynamically adjusting oscillatorNode.frequency.value(the frequency in Hertz ) and gainNode.gain.value(the relative volume), simple melodies can be generated.

Browser support

The Web Audio API is supported by all major current browsers: Mozilla Firefox from version 25, Google Chrome from version 14 (up to version 33 only with webkit- prefix ), Microsoft Edge , Opera from version 15 (from version 22 without prefix) and Safari from Version 6 (with prefix). Most mobile browsers also support the API.

As the specification is still in development, the level of support varies between different browsers and between different browser versions. The performance and debugging options are also different.

For older browsers there are polyfills that work via Flash or an older API in Firefox.

Individual evidence

  1. ↑ Web audio spatialization basics. In: Mozilla Developer Network . Retrieved September 5, 2016 .
  2. ↑ Visualizations with Web Audio API. In: Mozilla Developer Network . Retrieved September 5, 2016 .
  3. ↑ Chris Rogers: Web Audio API . W3C . March 15, 2012. Archived from the original on March 15, 2012. Retrieved on July 4, 2012.
  4. ↑ Using the Web Audio API. In: Mozilla Developer Network . Retrieved September 5, 2016 .
  5. ↑ Can I use: Web Audio API. Retrieved September 5, 2016 .
  6. ↑ Unprefixed Web Audio API - Chrome Platform Status. Retrieved September 5, 2016 .
  7. ↑ Soledad Penadés: What's new in Web Audio? In: Mozilla Hacks. August 15, 2016, accessed September 5, 2016 .
  8. ↑ Web Audio Editor. In: Mozilla Developer Network . Retrieved September 5, 2016 .
  9. ↑ g200kg: WAAPISim. In: GitHub . Retrieved September 6, 2016 .

Web links