Introduction and application of Web audio API


What is web audio API

As an older programmer, most of our knowledge of web pages is in HTML / CSS / JavaScript. We will be proud to think that web pages are UI components used to display content and call server API.

But history is always teaching us that if we don’t learn, we will regress, and those who are backward will be fearless. The web audio API is enough to slap us in the face.

Before that, the way that web pages can process audio is only the < audio > tag, but its ability is very limited, and it is totally powerless for more advanced audio operations. In order to enhance the web browser’s ability to handle audio, W3C specification started to work.

The design goal of web Auido API is to design and develop game audio processing system and desktop audio application. In other words, we can almost complete the construction of a professional audio processing software (such as Cubase / logic) by using web audio API, and all this is built on the browser technology.

From the design of API, we can achieve:

  • High precision audio computing is realized. It is mainly used in Daw (sequencer), software instruments and other scenes.
  • Audio reverberators. The necessary ability of music mixing.
  • 3D audio. It’s needed in games and music production.
  • Integration with < audio > / webrtc.

Design philosophy of Web audio API

In short, the so-called audio processing is actually a standard IO function. Get an audio stream (input) from a certain place, and send it to a destination after real-time calculation and processing, and this processing is also called effect (I prefer to call it filter function by habit).

Introduction and application of Web audio API

After a complex input / destination choreography, you can get a routing graph. This routing table defines how audio is shuttled through different filter functions. The definition of the whole process is audio context.

The audiocontext class carries the flow mode of audio stream.

The simplest example of audio context can be:

  1. Define the audio stream from an audio tag.
  2. Link the audio stream to a volume amplifier.
  3. Link the volume amplifier to the standard audio output connector (computer speaker).

So we get a real-time volume gain audio processing stream. On this basis, we can also connect a reverberation effect device after ා 2, and add a little echo effect to make the sound a little more mellow. Its link topology becomes:

< audio > label — > volume gain — > reverberator — > computer speaker.

The purpose of the above introduction is to express that we want to use this pluggable filter function to understand the design of the entire web audio API will become very easy.

In the web audio API, different filter functions are designed as different audionode classes. All auidonode subclasses inherit from the audionode class. Audionode has two core functions’ connect ‘)and`disconnect()`。

That is, the two functions process different audionode subclasses to get a processing graph.

Introduction and application of Web audio API

In trying to understand the design concept of the whole web audio API, the most important thing is to understand that the essence of an audio processing system is a choreographed directed graph process, and that audio processing is the process from input to output.

Web audio API mind map

The author classifies the common web audio API, which is convenient for beginners to sort out.

Introduction and application of Web audio API

Application of Web audio API

Looking up music score learning new posture is a new electronic music score platform. At the same time, we are trying to use web audio API to develop products in the field of Mir.

  1. Metronome application

Check music score – low tone metronome

This application uses web audio API to create audio in real time, and also uses analyzer node to calculate spectrum.

Advantages of using web audio API:

In the traditional web development, the development of metronome like applications usually depends on the < audio > tag to play and pause the work. But this kind of control can be very bad at delay, and can’t be applied in the professional field of metronome.

2. Tuner application

Check music score – low tone tuner

This tuner is a more classic audio processing scene.

  1. Get the real-time audio stream from the microphone.
  2. Real time pitch detection of audio stream is carried out, and the FFT frequency domain information of audio stream is directly obtained in the process of processing, which is calculated by simple calculation rules.
  3. Spectrum rendering of real-time audio (using analyzer interface).

Recommended Today

Choose react or angular 2

Original addressChoosing between React vs. Angular 2The following is the translation of this article, which can be used at your choiceReactperhapsAngular2We need to help when we need to. React has become a cool representative in 2015, but angular.js has changed from a front-end framework that people love to a terrible devil (and not so terrible…) […]