10 Useful Web APIs for 2020

# 
## What is the web audio API?

The [**Web Audio API**](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) provides a powerful and versatile system to control audio on the web. This #key# API: Application Programming Interface #key# allows you to manipulate an audio stream on the web. 

It can be used to add effects and filters to an audio source on the web. The audio source can be from the `<audio>`, video/audio source files, or an audio network stream.

<html>
    <head> </head>
    <body>
        <header>
            <h2>Web APIs<h2>
        </header>
        
        <div class="web-api-cnt">
            <div class="web-api-card">
                <div class="web-api-card-head">Demo - Audio</div>
            <br>
            <div class="web-api-card-body">
                <div id="error" class="close"></div>
                <div>
                    <audio controls src="./audio.mp3" id="audio"></audio>
                </div>
                <br>
                <div>
                    <button onclick="audioFromAudioFile.init()">Init</button>
                    <button onclick="audioFromAudioFile.play()">Play</button>
                    <button onclick="audioFromAudioFile.pause()">Pause</button>
                    <button onclick="audioFromAudioFile.stop()">Stop</button>
                </div>
                <br>
                <div>
                    <span>Vol: <input onchange="audioFromAudioFile.changeVolume()" type="range" id="vol" min="1" max="2" step="0.01" value="1" /></span>
                    <span>Pan: <input onchange="audioFromAudioFile.changePan()" type="range" id="panner" min="-1" max="1" step="0.01" value="0" /></span>
                </div>
            </div>
            </div>
        </div>
    </body>
</html>

const l = console.log
    let audioFromAudioFile = (function() {
        var audioContext
        var volNode
        var pannerNode
        var mediaSource

        function init() { l("Init")
        try {
          audioContext = new AudioContext()        
          mediaSource = audioContext.createMediaElementSource(audio)
          volNode = audioContext.createGain()
          volNode.gain.value = 1
          pannerNode = new StereoPannerNode(audioContext, { pan:0 })
          
          mediaSource.connect(volNode).connect(pannerNode).connect(audioContext.destination)
          } catch(e) {
            error.innerHTML = "The Web Audio API is not supported in this device."
            error.classList.remove("close")
            }
         }

        function play() { audio.play() }

        function pause() { audio.pause() }

        function stop() { audio.stop() }

        function changeVolume() {
            volNode.gain.value = this.value
            l("Vol Range:",this.value)
        }

        function changePan() {
            pannerNode.gain.value = this.value
            l("Pan Range:",this.value)
        }

        return {
            init,
            play,
            pause,
            stop,
            changePan,
            changeVolume
        }
    })

codemirror

# 
## Explanation

* This example channels the audio from an `<audio>` element to an `AudioContext`. 

* Sound effects (like panning) are added to the audio source before being channeled to the speakers' audio output.

* The `Init` button calls the `init` function when clicked. This will create an `AudioContext` instance and set it to `audioContext`. 

* Next, it creates a media source, `createMediaElementSource(audio)`, and passes the audio element as the audio source.

* The volume node `volNode` is created using `createGain`. Here, we adjust the volume of the audio. 

* Next, the panning effect is set using the `StereoPannerNode`.

* Finally, the nodes are connected to the media source.

* The buttons (`Play`, `Pause`, `Stop`) play, pause and stop the audio.

* We have a volume and panning range slider. If these are changed, the volume and the panning effect of the audio are affected.

#   
## 
> #### References
>
>* Try out [this](https://web-api-examples.github.io/audio.html) example of an API that synthesizes and adds effects to audio.
>* Click [here](https://codepen.io/Rumyra/embed/qyMzqN?#result-box) for another example.

How to use web audio API using JavaScript

What is the web audio API?

Code

Explanation

References