What is Web Audio

The most common way to play audio on the Web is to use the AUDIO tag of HTML5 to realize audio playback and interaction. Web Audio, on the other hand, provides a full set of apis for more sophisticated Audio control and processing on the Web. For example: allow developers to select audio sources, add effects to audio, visualize audio, add spatial effects, etc. Web Audio is not going to replace the Audio tag, it’s supposed to be a complement to the Audio tag. How to choose between the two in Web front-end development often depends on the specific application scenario. If you just want to control the playback of a simple track, the Audio TAB might be a better and faster option

A few concepts of Web Audio

Before exploring how to use Web Audio, let’s look at a few key concepts:

AudioContext AudioContext

AudioNode AudioNode

The audio node connects to Connect

The audio source source

Audio output destination

AudioContext

Before performing audio processing, you need to create an AudioContext object. All subsequent audio control and processing are based on the AudioContext.

AudioNode

Audio node, an Audio processing module, Web Audio’s Audio processing, following the modular principle, each AudioNode is an independent Audio processing module. Multiple AudionOdes form an audio processing flow chart in series under the control of the AudioContext.

connect

As mentioned above, the Audio processing flow of Web Audio is usually composed of multiple AudionOdes connected in series to form a processing flow chart. Audionodes are connected through the connect method. The processed audio is transferred to one node, and the link is transferred to the next node for processing.

source & destination

Audionodes can be simply divided into three types according to their functions: audio source node, audio output node, and intermediate processing node. The audio source node, which receives audio input, is at the head of the entire audio processing process, while the audio output node, which outputs and plays audio, is at the tail of the audio processing process. The intermediate processing node is to control and process the audio in the intermediate environment. So a typical Web Audio processing flow is shown below:

Web Audio easy to use

Let’s walk through the complete flow of Web Audio with a simple example. Let’s try out the Web Audio Api with two MP3s (Super Mario and Crayon).

<div>    
  <div id="audioWrap">
    <audio id="cjml" src="./cjml.mp3" controls></audio>
    <audio id="lbxx" src="./lbxx.mp3" controls></audio>
  </div>
</div>

Copy the code

/* You need a Web server to host HTML and MP3 files. You can build local Web services based on Node.js or nginx. * MediaElementSourceNode cannot also publish cross-domain processing audio based on the file:/ protocol */

const audioCjml = document.querySelector('#cjml');
const audioLbxx = document.querySelector('#lbxx');
// Create audio context
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// Create two audio source nodes
const source1 = audioCtx.createMediaElementSource(audioCjml); // Super Mario bros

const source2 = audioCtx.createMediaElementSource(audioLbxx); // Crayon xiao Xin
// GainNode Audio node is used to control audio sounds
const gainNode = audioCtx.createGain();

// Audio playback
audioCjml.onplay = function () {      
  // value The value ranges from 0 to 1. The minimum volume is 0 and the maximum volume is 1
  gainNode.gain.value = 1;
  // Connect crayon xin-mp3 to gainNode
  source1.connect(gainNode);
  // gainNode connects to the audio output
  gainNode.connect(audioCtx.destination);
}

audioLbxx.onplay = function () {
  gainNode.gain.value = 0.4;
  source2.connect(audioCtx.destination);
  setTimeout(() = > {
    gainNode.gain.value = 1;
    audioLbxx.pause();
    audioLbxx.currentTime = 0;
    source2.disconnect(audioCtx.destination);        
  }, 7000);
}

Copy the code

This example is simple, with Super Mario as background music and a GainNode inserted to control the volume of the background music. Lower the volume of Super Mario When crayon Shin is interrupted, and restore the volume when Crayon Shin is finished. This demo will give you a taste of how Web Audio works. Api more and more rich functions, MDN has a comprehensive introduction, can be more in-depth understanding of learning.