# Web Audio API
Route the player's audio through the Web Audio API to pan it, change its tone with an equalizer, and draw its spectrum.
Tip: open your browser's developer console and use the `player` and `THEOplayer` variables to interact with this demo.
Press play, then move the sliders. The audio context starts after you interact with the player.
| Pan | 0 | 0.00 |
| ------ | - | ---- |
| Bass | 0 | 0 dB |
| Mid | 0 | 0 dB |
| Treble | 0 | 0 dB |
| Volume | 1 | 100% |
\[ ]Bypass effectsReset
`player.audio.createAudioSourceNode(context)` returns an audio node with the player's audio. Connect it to other nodes of the same [`AudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext). Once the player's audio goes through the audio graph, you only hear it if the graph ends at `context.destination`.
```js
const context = new AudioContext();
const source = player.audio.createAudioSourceNode(context);
const panner = new StereoPannerNode(context);
const bass = new BiquadFilterNode(context, { type: 'lowshelf', frequency: 250 });
const volume = new GainNode(context);
const analyser = new AnalyserNode(context, { fftSize: 256 });
source.connect(panner).connect(bass).connect(volume).connect(analyser).connect(context.destination);
// Change values smoothly to avoid audible clicks.
bass.gain.setTargetAtTime(6, context.currentTime, 0.02);
```
Browsers start an `AudioContext` in the `suspended` state until the viewer interacts with the page, and the player is silent while the context is suspended. Call `context.resume()` when playback starts or after a click or key press, as this example does.
See the [`Audio` API](https://docs-preview.optiview.dolby.com/pr-913/theoplayer/v11/api-reference/web/interfaces/Audio) and the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) documentation on MDN.
Code
demo.html
```html
Web Audio API
```